Progress Bar Shortcodes

2 Alternative Styles

Solid Style
33
Solid Style
66
Solid Style
100
Simple Style
33
Simple Style
66
Simple Style
100
Get The Code

[progress_bar value="33" icon="eye-open" style="solid" size="small"]Solid Style[/progress_bar]
[progress_bar value="66" icon="eye-open" style="solid" size="medium"]Solid Style[/progress_bar]
[progress_bar value="100" icon="eye-open" style="solid" size="big"]Solid Style[/progress_bar]

[progress_bar value="33" icon="eye-open" style="simple" size="small"]Simple Style[/progress_bar]
[progress_bar value="66" icon="eye-open" style="simple" size="medium"]Simple Style[/progress_bar]
[progress_bar value="100" icon="eye-open" style="simple" size="big"]Simple Style[/progress_bar]

3 Different Sizes

Small
33
Medium
66
Big
100
Get The Code

[progress_bar value="33" icon="eye-open" size="small" style="simple"]Small[/progress_bar]
[progress_bar value="66" icon="eye-open" size="medium" style="simple"]Medium[/progress_bar]
[progress_bar value="100" icon="eye-open" size="big" style="simple"]Big[/progress_bar]

2 Alternative Directions

Left Direction
80
Left Direction
60
Left Direction
40
Right Direction
80
Right Direction
60
Right Direction
40
Get The Code

[one_half]

[progress_bar value="80" icon="code" direction="left" size="medium"]Left Direction[/progress_bar]

[progress_bar value="60" icon="code" direction="left" size="medium"]Left Direction[/progress_bar]

[progress_bar value="40" icon="code" direction="left" size="medium"]Left Direction[/progress_bar]

[/one_half]

[one_half_last]

[progress_bar value="80" icon="pencil" size="medium" style="simple"]Right Direction[/progress_bar]

[progress_bar value="60" icon="pencil" size="medium" style="simple"]Right Direction[/progress_bar]

[progress_bar value="40" icon="pencil" size="medium" style="simple"]Right Direction[/progress_bar]

[/one_half_last]

Use With Columns

Your Satisfaction
100

Curabitur vel tempus velit. Proin vestibulum lorem nec ante convallis lacinia. Aliquam erat volutpat. Donec eros orci, iaculis id odio nec, pharetra egestas risus.

Our Satisfaction
100

Curabitur vel tempus velit. Proin vestibulum lorem nec ante convallis lacinia. Aliquam erat volutpat. Donec eros orci, iaculis id odio nec, pharetra egestas risus.

Get The Code

[one_half]

[progress_bar value="100" icon="circle-arrow-right" size="medium" style="simple"]Your Satisfaction[/progress_bar]

<p style="text-align:right;">Curabitur vel tempus velit. Proin vestibulum lorem nec ante convallis lacinia. Aliquam erat volutpat. Donec eros orci, iaculis id odio nec, pharetra egestas risus.

[/one_half]

[one_half_last]

[progress_bar value="100" icon="circle-arrow-left" direction="left" size="medium" style="simple"]Our Satisfaction[/progress_bar]

Curabitur vel tempus velit. Proin vestibulum lorem nec ante convallis lacinia. Aliquam erat volutpat. Donec eros orci, iaculis id odio nec, pharetra egestas risus.

[/one_half_last]

Custom Colors

38
54
83
Get The Code

[progress_bar value="38" icon="pencil" text_color="#ffffff" bg_color="#9b59b6" size="medium" style="solid"]
[progress_bar value="54" icon="hand-right" text_color="#ffffff" bg_color="#00c6ff" size="medium" style="solid"]
[progress_bar value="83" icon="fighter-jet" text_color="#ffffff" bg_color="#00b976" size="medium" style="solid"]

All Available Icons

Shortcode documentation

  • id
    The id attribute specifies an id for an HTML element.
    It must be unique within the HTML document.
    (Mainly for additional styling/scripting purposes)
  • class
    The class attribute specifies a class name for an HTML element.
    (Mainly for additional styling/scripting purposes)
  • value
    0-100 range
  • direction
    Available Options:
    • right
    • left
  • icon
    Available Options:
    All icons available on Font Awesome site
  • style
    Available Options:
    • simple
    • solid
  • size
    Available Options:
    • small
    • medium
    • big
  • text_color
  • bg_color