tabler/pages/_docs/progress.md

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:

{% capture code %} {% include ui/progress.html %} {% endcapture %} {% include example.html code=code %}

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.

{% capture code %} {% include ui/progress.html value=57 size="sm" %} {% endcapture %} {% include example.html code=code %}

Progress without value

Remove the showed value by adding a class called .sr-only.

{% capture code %} {% include ui/progress.html value=75 show-value=false %} {% endcapture %} {% include example.html code=code %}

Indeterminate progress

To create indeterminate progress add .progress-bar-indeterminate to the .progress-bar element.

{% capture code %} {% include ui/progress.html indeterminate=true size="sm" %} {% endcapture %} {% include example.html code=code %}

Native progress element

You can also use native HTML5 <progress> element.

{% capture code %} {% endcapture %} {% include example.html code=code %}

Progress color

Customize the color of the progress bar. You can click [here]({% docs_url colors %}) to see the list of available colors.

{% capture code %} {% 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" %} {% endcapture %} {% include example.html code=code %}