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