Shortcodes

If you can dream it, you can do it

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:


OptionsDescription
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


markup

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


Size modifiers


markup

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


Colored progress bars


markup

[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

loading...

markup

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

Wir nutzen Cookies auf unserer Website. Einige von ihnen sind essenziell für den Betrieb der Seite, während andere uns helfen, diese Website und die Nutzererfahrung zu verbessern (Tracking Cookies). Sie können selbst entscheiden, ob Sie die Cookies zulassen möchten. Bitte beachten Sie, dass bei einer Ablehnung womöglich nicht mehr alle Funktionalitäten der Seite zur Verfügung stehen.