Progress Bars

With progress bars shortcode you can indicate some things such as skills, experience or state.

[divider]

Basic With Animated Load

Think Progress Bar

[progress animation=”true” corners=”r1″]
[score score=”90″]Example Skill #1[/score]
[score score=”57″]Example Skill #2[/score]
[score score=”39″]Example Skill #3[/score]
[score score=”77″]Example Skill #4[/score]
[/progress]

Heavy Progress Bar

[progress type=”heavy” animation=”true” corners=”r1″]
[score score=”32″]2012[/score]
[/progress]

[progress type=”heavy” animation=”true” corners=”r1″]
[score score=”72″]2013[/score]
[/progress]

[progress type=”heavy” animation=”true” corners=”r1″]
[score score=”80″]2014[/score]
[/progress]

[divider4]

Custom Bars: Colors, Animated & Corners

[row_fluid]
[span3]
[progress custom=”true” gradient_1=”rgb(171, 79, 51)” gradient_2=”rgb(229, 115, 79)” bg2Color=”” textColor=”rgb(171, 79, 51)”]
[score score=”90″]Skill #1[/score]
[score score=”57″]Skill #2[/score]
[score score=”39″]Skill #3[/score]
[score score=”77″]Skill #4[/score]
[/progress]
[/span3]

[span3]
[progress corners=”r1″ custom=”true” gradient_1=”#852056″ gradient_2=”#e685c1″ bg2Color=”” textColor=”#852056″]
[score score=”90″]Skill #1[/score]
[score score=”57″]Skill #2[/score]
[score score=”39″]Skill #3[/score]
[score score=”77″]Skill #4[/score]
[/progress]
[/span3]

[span3]
[progress corners=”r2″ custom=”true” gradient_1=”#208556″ gradient_2=”#85e6c1″ bg2Color=”” textColor=”#208556″]
[score score=”90″]Skill #1[/score]
[score score=”57″]Skill #2[/score]
[score score=”39″]Skill #3[/score]
[score score=”77″]Skill #4[/score]
[/progress]
[/span3]

[span3]
[progress corners=”r3″ custom=”true” gradient_1=”#205685″ gradient_2=”#85c1e6″ bg2Color=”” textColor=”#205685″]
[score score=”90″]Skill #1[/score]
[score score=”57″]Skill #2[/score]
[score score=”39″]Skill #3[/score]
[score score=”77″]Skill #4[/score]
[/progress]
[/span3]
[/row_fluid]

[divider4]

[row_fluid]
[span3]
[progress animate=”true” custom=”true” gradient_1=”rgb(171, 79, 51)” gradient_2=”rgb(229, 115, 79)” bg2Color=”” textColor=”rgb(171, 79, 51)”]
[score score=”90″]Skill #1[/score]
[score score=”57″]Skill #2[/score]
[score score=”39″]Skill #3[/score]
[score score=”77″]Skill #4[/score]
[/progress]
[/span3]

[span3]
[progress animate=”true” corners=”r1″ custom=”true” gradient_1=”#852056″ gradient_2=”#e685c1″ bg2Color=”” textColor=”#852056″]
[score score=”90″]Skill #1[/score]
[score score=”57″]Skill #2[/score]
[score score=”39″]Skill #3[/score]
[score score=”77″]Skill #4[/score]
[/progress]
[/span3]

[span3]
[progress corners=”r2″ animate=”true” custom=”true” gradient_1=”#208556″ gradient_2=”#85e6c1″ bg2Color=”” textColor=”#208556″]
[score score=”90″]Skill #1[/score]
[score score=”57″]Skill #2[/score]
[score score=”39″]Skill #3[/score]
[score score=”77″]Skill #4[/score]
[/progress]
[/span3]

[span3]
[progress corners=”r3″ animate=”true” custom=”true” gradient_1=”#205685″ gradient_2=”#85c1e6″ bg2Color=”” textColor=”#205685″]
[score score=”90″]Skill #1[/score]
[score score=”57″]Skill #2[/score]
[score score=”39″]Skill #3[/score]
[score score=”77″]Skill #4[/score]
[/progress]
[/span3]
[/row_fluid]

[divider4]

[row_fluid]
[span3]
[progress type=”heavy” custom=”true” gradient_1=”rgb(171, 79, 51)” gradient_2=”rgb(229, 115, 79)” bg2Color=”” textColor=”#ffffff”]
[score score=”90″]2011[/score]
[score score=”57″]2012[/score]
[score score=”39″]2013[/score]
[score score=”77″]2014[/score]
[/progress]
[/span3]

[span3]
[progress type=”heavy” corners=”r1″ custom=”true” gradient_1=”#852056″ gradient_2=”#e685c1″ bg2Color=”” textColor=”#ffffff”]
[score score=”90″]2011[/score]
[score score=”57″]2012[/score]
[score score=”39″]2013[/score]
[score score=”77″]2014[/score]
[/progress]
[/span3]

[span3]
[progress type=”heavy” corners=”r2″ custom=”true” gradient_1=”#208556″ gradient_2=”#85e6c1″ bg2Color=”” textColor=”#ffffff”]
[score score=”90″]2011[/score]
[score score=”57″]2012[/score]
[score score=”39″]2013[/score]
[score score=”77″]2014[/score]
[/progress]
[/span3]

[span3]
[progress type=”heavy” corners=”r3″ custom=”true” gradient_1=”#205685″ gradient_2=”#85c1e6″ bg2Color=”” textColor=”#ffffff”]
[score score=”90″]2011[/score]
[score score=”57″]2012[/score]
[score score=”39″]2013[/score]
[score score=”77″]2014[/score]
[/progress]
[/span3]
[/row_fluid]

[divider4]

[row_fluid]
[span3]
[progress type=”heavy” custom=”true” animate=”true” gradient_1=”rgb(171, 79, 51)” gradient_2=”rgb(229, 115, 79)” bg2Color=”” textColor=”#ffffff”]
[score score=”90″]2011[/score]
[score score=”57″]2012[/score]
[score score=”39″]2013[/score]
[score score=”77″]2014[/score]
[/progress]
[/span3]

[span3]
[progress type=”heavy” corners=”r1″ animate=”true” custom=”true” gradient_1=”#852056″ gradient_2=”#e685c1″ bg2Color=”” textColor=”#ffffff”]
[score score=”90″]2011[/score]
[score score=”57″]2012[/score]
[score score=”39″]2013[/score]
[score score=”77″]2014[/score]
[/progress]
[/span3]

[span3]
[progress type=”heavy” corners=”r2″ animate=”true” custom=”true” gradient_1=”#208556″ gradient_2=”#85e6c1″ bg2Color=”” textColor=”#ffffff”]
[score score=”90″]2011[/score]
[score score=”57″]2012[/score]
[score score=”39″]2013[/score]
[score score=”77″]2014[/score]
[/progress]
[/span3]

[span3]
[progress type=”heavy” corners=”r3″ animate=”true” custom=”true” gradient_1=”#205685″ gradient_2=”#85c1e6″ bg2Color=”” textColor=”#ffffff”]
[score score=”90″]2011[/score]
[score score=”57″]2012[/score]
[score score=”39″]2013[/score]
[score score=”77″]2014[/score]
[/progress]
[/span3]
[/row_fluid]
[clearboth]