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