Shortcodes - Progress Bar

Progress bar

Use the [progress] shortcode to create a progress bar in your content. The progress bar width is defined by the width option. The following options can be used in the style parameter:

Options	Description
uk-progress-mini	Size modifier for a mini progress bar
uk-progress-small	Size modifier for a small progress bar
uk-progress-primary	Color modifier for a blue progress bar
uk-progress-success	Color modifier for a green progress bar
uk-progress-warning	Color modifier for an orange progress bar
uk-progress-danger	Color modifier for a red progress bar
uk-progress-striped	Add stripes to the progress bar
uk-active	Animate a striped progress bar

Simple progress bar

[progress style="" width=40][/progress]

Size modifiers

[progress style="uk-progress-mini" width=40][/progress]
[progress style="uk-progress-small" width=50][/progress]
[progress style="" width=60][/progress]

Colored progress bars

[progress style="uk-progress-primary" width=30][/progress]
[progress style="uk-progress-success" width=40][/progress]
[progress style="uk-progress-warning" width=50][/progress]
[progress style="uk-progress-danger" width=60][/progress]

Combined options

[progress style="uk-progress-success uk-progress-striped uk-active" width=45]loading...[/progress]