1 minute read

Progress bar


  • text – add text, exemplary value: “My progress bar”.
  • value – set value, for example: “50”.
  • units – set units, for example: “%”.
  • speed – set speed of animation, for example: “300”.
  • type – choose style type, allowed values: “thin” or “thick”.
  • text_color – set color of text, for example: “#fff”.
  • bar_background_color – set background color of bar, for example: “#e6e6e6”.
  • bar_fill_color – set fill background color, for example: “#3f3f3f”.
  • class – add a CSS class.

Exemplary usage:

[progress text="Place for text" value="50" units="%" speed="300" type="thick" text_color="#fff" bar_background_color="#e6e6e6" bar_fill_color="#3f3f3f" class=""]

See also demo of progress bar shortcode. In full download package (Dummy data/shortcodes-pages/counters.html) you can find the file with shortcodes we used to create demo page.

Did you know...

You can use progress bar element in drag and drop website builder (Visual Composer) and customize this element easily without coding skills. Parameters and design options are the same as in shortcode.