Progress & Counters

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.

This Template have 13694 Lines of Code

Included are more then 150 Shortcodes

Delievered with 13 custom Joomla Extensions

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

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

Basic Progress Bars

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

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

Progress Bars Color Variations

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

{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"}

Slim Progress Bars

This is a basic example of the slim progress bars.

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

Slim Progress Bars Color Variations

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

{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"}

Slim Progress Bars with Text

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

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

Progress Circles

This is a basic example of the circle progress bars.

{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"}