Progress and Counters

Basic Progress Bars

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

• Shortcode

  {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.

• Shortcode

  {progress width="10"}
  {progress width="30" color="progress-bar-success"}
  {progress width="50" color="progress-bar-info"}
  {progress width="70" color="progress-bar-warning"}
  {progress width="90" color="progress-bar-danger"}

Slim Progress Bars

This is a basic example of the slim progress bars.

• Shortcode

  {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.

• Shortcode

  {progress-slim width="10"}
  {progress-slim width="30" color="progress-bar-success"}
  {progress-slim width="50" color="progress-bar-info"}
  {progress-slim width="70" color="progress-bar-warning"}
  {progress-slim width="90" 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.

• Shortcode

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