Progress Bar Shortcodes

2 Alternative Styles

  • 0% Solid Style
    0% Solid Style
    0% Solid Style
  • 0% Simple Style
    0% Simple Style
    0% Simple Style
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]

shadow-ornament

3 Different Sizes

0% Small
0% Medium
0% Big
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]

shadow-ornament

2 Alternative Directions

  • 0% Left Direction
    0% Left Direction
    0% Left Direction
  • 0% Right Direction
    0% Right Direction
    0% Right Direction
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]

shadow-ornament

Use With Columns

  • 0% Your Satisfaction

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

  • 0% Our Satisfaction

    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]

shadow-ornament

Custom Colors

  • 0%
  • 0%
  • 0%
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"]

shadow-ornament

All Available Icons

shadow-ornament

Shortcode documentation

0%