tabler.tabler/docs/content/ui/components/progress.md

---

title: Progress bars summary: Progress bars are used to provide feedback on an action status and inform users of the current progress. Although seemingly small interface elements, they are extremely hepful in managing users' expectations and preventing them from abandoning a process they have initiated. bootstrapLink: components/progress

description: Track and display progress visually.

Default markup

To create a default progress bar, add a .progress class to a <div> element. Thanks to that, you will be able to notify users how long they have to wait for a process to complete.

{% capture html -%}

{%- endcapture %} {% include "docs/example.html" html=html %}

Progress size

Using Bootstrap’s typical naming structure, you can create a standard progress bar or scale it up or down to different sizes based on what’s needed.

<div class="progress progress-sm">...</div>

Look at the example below to see how it works:

{% capture html -%}

<div

class="progress-bar"
style="width: 57%"
role="progressbar"
aria-valuenow="57"
aria-valuemin="0"
aria-valuemax="100"
aria-label="57% Complete"

<span class="visually-hidden">57% Complete</span>

{%- endcapture %} {% include "docs/example.html" html=html %}

Indeterminate progress

You can create a progress bar which shows indeterminate progress by adding .progress-bar-indeterminate to the .progress-bar element.

{% capture html -%}

{%- endcapture %} {% include "docs/example.html" html=html %}

Native progress element

You can also use the native HTML5 <progress> element. It is a great way to create a progress bar without the need for additional HTML elements. This is what it looks like:

{% capture html -%} {%- endcapture %} {% include "docs/example.html" html=html %}

Progress color

You can change the color of the progress bar by adding a color class to the .progress-bar element. You can use the color classes like .bg-primary, .bg-success, etc. to change the color of the progress bar.

See the full list of available colors for more details.

{% capture html -%}

<div

class="progress-bar bg-red"
style="width: 24%"
role="progressbar"
aria-valuenow="24"
aria-valuemin="0"
aria-valuemax="100"
aria-label="24% Complete"

<span class="visually-hidden">24% Complete</span>

<div

class="progress-bar bg-green"
style="width: 45%"
role="progressbar"
aria-valuenow="45"
aria-valuemin="0"
aria-valuemax="100"
aria-label="45% Complete"

<span class="visually-hidden">45% Complete</span>

<div

class="progress-bar bg-purple"
style="width: 64%"
role="progressbar"
aria-valuenow="64"
aria-valuemin="0"
aria-valuemax="100"
aria-label="64% Complete"

<span class="visually-hidden">64% Complete</span>