Progress Bar

Style variations

Get the code

[su_progress_bar style="default"]

[su_progress_bar style="fancy"]

[su_progress_bar style="thin"]

Color options

Get the code

[su_progress_bar bar_color="#f0f0f0" fill_color="#333333" text_color="#ffffff"]

[su_progress_bar style="fancy" bar_color="#ffd159" fill_color="#00b55c" text_color="#ffffff"]

[su_progress_bar style="thin" bar_color="#fbcfff" fill_color="#b5009b" text_color="#b5009b"]

Custom text and percent

Photoshop

CSS

HTML

Get the code

[su_progress_bar percent="90" text="Photoshop"]

[su_progress_bar percent="80" text="CSS"]

[su_progress_bar percent="70" text="HTML"]

No animation

Get the code

[su_progress_bar animation="no"]

Combined with columns

Get the code

[su_row]
[su_column size="1/3"]
[su_progress_bar]
[/su_column]
[su_column size="1/3"]
[su_progress_bar]
[/su_column]
[su_column size="1/3"]
[su_progress_bar]
[/su_column]
[/su_row]