1.6 KiB
title, description, bootstrap-link, done
| title | description | bootstrap-link | done |
|---|---|---|---|
| Progress | A progress bar can be used to show a user how far along he is in a process. | components/progress/ | true |
Default markup
To create a default progress bar, add a .progress class to a <div> element:
{% example html %} {% include ui/progress.html %} {% endexample %}
Progress size
Using Bootstrap’s typical naming structure, you can create a standard progress, or scale it up to different sizes based on what’s needed.
{% example html %} {% include ui/progress.html value=57 size="sm" %} {% endexample %}
Progress without value
Remove the showed value by adding a class called .sr-only.
{% example html %} {% include ui/progress.html value=75 show-value=false %} {% endexample %}
Indeterminate progress
To create indeterminate progress add .progress-bar-indeterminate to the .progress-bar element.
{% example html %} {% include ui/progress.html indeterminate=true size="sm" %} {% endexample %}
Native progress element
You can also use native HTML5 <progress> element.
{% example html %}
Progress color
Customize the color of the progress bar. You can click [here]({% docs_url colors %}) to see the list of available colors.
{% example %} {% include ui/progress.html size="sm" color="red" class="mb-2" value=24 %} {% include ui/progress.html size="sm" color="green" class="mb-2" value=45 %} {% include ui/progress.html size="sm" color="purple" class="mb-2" value=64 %} {% include ui/progress.html size="sm" color="pink" %} {% endexample %}