Progress Bar Shortcodes

2 Alternative Styles

[one_half]

[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]

[/one_half]

[one_half_last]

[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]

[/one_half_last]

[toggle title=”Get The Code” icon=”file-alt” style=”simple”]

[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]

[/get_the_code]

[/toggle]

[divider]

3 Different Sizes

[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]

[toggle title=”Get The Code” icon=”file-alt” style=”simple”]

[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]

[/get_the_code]

[/toggle]

[divider]

2 Alternative Directions

[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]

[toggle title=”Get The Code” icon=”file-alt” style=”simple”]

[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]

[/get_the_code]

[/toggle]

[divider]

Use With Columns

[one_half]

[progress_bar value=”100″ icon=”circle-arrow-right” size=”medium” style=”simple”]Your 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]

[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]

[toggle title=”Get The Code” icon=”file-alt” style=”simple”]

[get_the_code]

[one_half]

[progress_bar value=”100″ icon=”circle-arrow-right” size=”medium” style=”simple”]Your 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]

[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]

[/get_the_code]

[/toggle]

[divider]

Custom Colors

[one_third]

[progress_bar value=”38″ icon=”pencil” text_color=”#ffffff” bg_color=”#9b59b6″ size=”medium” style=”solid”]

[/one_third]

[one_third]

[progress_bar value=”54″ icon=”hand-right” text_color=”#ffffff” bg_color=”#00c6ff” size=”medium” style=”solid”]

[/one_third]

[one_third_last]

[progress_bar value=”83″ icon=”fighter-jet” text_color=”#ffffff” bg_color=”#00b976″ size=”medium” style=”solid”]

[/one_third_last]

[toggle title=”Get The Code” icon=”file-alt” style=”simple”]

[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”]

[/get_the_code]

[/toggle]

[divider]

All Available Icons

[icons]

[divider]

[icon name=”lightbulb” size=”medium” style=”solid” shape=”circle”]

Shortcode documentation

[progress_bar doc=”true”]