Progress Bars & Counters

{headline type=»h2″ style=»heading-single» color=»color-theme» text=»Basic Counter»}

This is a basic example of the Counter Shortcode. It can be used everywhere and it’s rendered as inline style so you can use it also in Headlines or similar.

{spacer height=»20px»}

This Template have {counter value=»13694″ color=»color-theme bold»} Lines of Code
Included are more then {counter value=»150″ color=»color-theme bold»} Shortcodes
Delievered with {counter value=»13″ color=»color-theme bold»} custom Joomla Extensions

{spacer height=»40px»}

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis {counter value=»145″ color=»color-purple bold»} vestibulum. Sed posuere consectetur est at lobortis. Etiam porta sem malesuada magna mollis euismod. Duis {counter value=»7″ color=»color-success bold»} mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante {counter value=»127″ color=»color-warning bold»} venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis {counter value=»12503″ color=»color-danger bold»} consectetur purus sit amet fermentum.

{toggle1 title=»Shortcode»}

{counter value="10"} {counter value="13486" color="color-success"} {counter value="12490" color="color-success bold"}

{/toggle} {spacer height=»40px»} {headline type=»h2″ style=»heading-single» color=»color-theme» text=»Basic Progress Bars»}

This is a basic example of the default progress bars, you can use every value from 0 – 100.

{spacer height=»20px»} {progress width=»0″} {progress width=»5″} {progress width=»10″} {progress width=»15″} {progress width=»20″} {progress width=»25″} {progress width=»30″} {progress width=»35″} {progress width=»40″} {progress width=»45″} {progress width=»50″} {progress width=»55″} {progress width=»60″} {progress width=»65″} {progress width=»70″} {progress width=»75″} {progress width=»80″} {progress width=»85″} {progress width=»90″} {progress width=»95″} {progress width=»100″} {toggle1 title=»Shortcode»}

{progress width="10"} {progress width="23"} {progress width="39"}

{/toggle} {spacer height=»40px»} {headline type=»h2″ style=»heading-single» color=»color-theme» text=»Progress Bars Color Variations»}

This is a basic example of the default progress bars with different colors.

{spacer height=»20px»} {progress width=»10″ } {progress width=»20″ color=»progress-bar-purple»} {progress width=»30″ color=»progress-bar-orange»} {progress width=»40″ color=»progress-bar-success»} {progress width=»50″ color=»progress-bar-info»} {progress width=»60″ color=»progress-bar-warning»} {progress width=»70″ color=»progress-bar-danger»} {toggle1 title=»Shortcode»}

{progress width="10"} {progress width="20" color="progress-bar-purple"} {progress width="30" color="progress-bar-orange"} {progress width="40" color="progress-bar-success"} {progress width="50" color="progress-bar-info"} {progress width="60" color="progress-bar-warning"} {progress width="70" color="progress-bar-danger"}

{/toggle} {spacer height=»40px»} {headline type=»h2″ style=»heading-single» color=»color-theme» text=»Slim Progress Bars»}

This is a basic example of the slim progress bars.

{spacer height=»20px»} {progress-slim width=»0″} {progress-slim width=»5″} {progress-slim width=»10″} {progress-slim width=»15″} {progress-slim width=»20″} {progress-slim width=»25″} {progress-slim width=»30″} {progress-slim width=»35″} {progress-slim width=»40″} {progress-slim width=»45″} {progress-slim width=»50″} {progress-slim width=»55″} {progress-slim width=»60″} {progress-slim width=»65″} {progress-slim width=»70″} {progress-slim width=»75″} {progress-slim width=»80″} {progress-slim width=»85″} {progress-slim width=»90″} {progress-slim width=»95″} {progress-slim width=»100″} {toggle1 title=»Shortcode»}

{progress-slim width="10"} {progress-slim width="23"} {progress-slim width="39"}

{/toggle} {spacer height=»40px»} {headline type=»h2″ style=»heading-single» color=»color-theme» text=»Slim Progress Bars Color Variations»}

This is a basic example of the slim progress bars in different colors.

{spacer height=»20px»} {progress-slim width=»10″ } {progress-slim width=»20″ color=»progress-bar-purple»} {progress-slim width=»30″ color=»progress-bar-orange»} {progress-slim width=»40″ color=»progress-bar-success»} {progress-slim width=»50″ color=»progress-bar-info»} {progress-slim width=»60″ color=»progress-bar-warning»} {progress-slim width=»70″ color=»progress-bar-danger»} {toggle1 title=»Shortcode»}

{progress-slim width="10"} {progress-slim width="20" color="progress-bar-purple"} {progress-slim width="30" color="progress-bar-orange"} {progress-slim width="40" color="progress-bar-success"} {progress-slim width="50" color="progress-bar-info"} {progress-slim width="60" color="progress-bar-warning"} {progress-slim width="70" color="progress-bar-danger"}

{/toggle} {spacer height=»40px»} {headline type=»h2″ style=»heading-single» color=»color-theme» text=»Slim Progress Bars with Text»}

This is a basic example of the slim progress bars with optional text and percentage values.

{spacer height=»20px»} {progress-slim width=»95″ text=»Joomla» color=»color-theme»} {progress-slim width=»87″ text=»CSS3″ color=»color-theme»} {progress-slim width=»72″ text=»HTML5″ color=»color-theme»} {progress-slim width=»92″ text=»Project Management» color=»color-theme»} {toggle1 title=»Shortcode»}

{progress-slim width="95" text="Joomla" color="color-theme"}

{/toggle} {spacer height=»40px»} {headline type=»h2″ style=»heading-single» color=»color-theme» text=»Progress Circles»}

This is a basic example of the circle progress bars.

{alert style=»danger»}Please note: these circles will NOT WORK WITH OUR THEMESWITCHER HERE IN THE DEMO cause the colors for it have to defined in the Shortcode.{/alert} {spacer height=»20px»} {row} {col6} {pie1 percent=»90″ color=»#20A5E8″ icon=»fa-heart»}

Style 1 Round

{/col} {col6} {pie2 percent=»70″ color=»#fff» icon=»fa-upload»}

Style 2 Round

{/col} {/row} {row} {col6} {pie3 percent=»50″ color=»#20A5E8″}

Style 3 Round

{/col} {col6} {pie4 percent=»40″ color=»#20A5E8″}

Style 4 Round

{/col} {/row} {toggle1 title=»Shortcode»}

{pie1 percent="90" color="#20A5E8" icon="fa-heart"} {pie2 percent="70" color="#ffffff" icon="fa-upload"} {pie3 percent="50" color="#20A5E8"} {pie4 percent="40" color="#20A5E8"}

{/toggle}

Posted on by GM in Elements Leave a comment

Add a Comment