[heading size=”h2″ style=”uk-module-title”]Progress bar[/heading]
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:
[line_break/]
| 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 |
[line_break/] [heading size=”h3″ style=”uk-module-title”]Simple progress bar[/heading] [progress style=”” width=40][/progress] [line_break/] [badge style=”note uk-margin-top”]markup[/badge]
[code][progress style=”” width=40][/progress][/code]
[line_break/] [heading size=”h3″ style=”uk-module-title”]Size modifiers [/heading] [progress style=”uk-progress-mini” width=40][/progress] [progress style=”uk-progress-small” width=50][/progress] [progress style=”” width=60][/progress] [line_break/] [badge style=”note uk-margin-top”]markup[/badge]
[code][progress style=”uk-progress-mini” width=40][/progress] [progress style=”uk-progress-small” width=50][/progress] [progress style=”” width=60][/progress][/code]
[line_break/] [heading size=”h3″ style=”uk-module-title”]Colored progress bars[/heading] [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] [line_break/] [badge style=”note uk-margin-top”]markup[/badge]
[code][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][/code]
[line_break/] [heading size=”h3″ style=”uk-module-title”]Combined options[/heading] [progress style=”uk-progress-success uk-progress-striped uk-active” width=45]loading…[/progress] [line_break/] [badge style=”note uk-margin-top”]markup[/badge]
[code][progress style=”uk-progress-success uk-progress-striped uk-active” width=45]loading…[/progress][/code]
