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

title, summary, bootstrapLink, description

title	summary	bootstrapLink	description
Progress Bar	A progress bar is used to provide feedback on an action status and inform users about current progress. Although it is a small interface element, it is extremely helpful in managing user expectations and preventing abandonment of an initiated process.	components/progress	Track and display progress with a progress bar.

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 -%}

57% Complete

45% Complete

63% Complete

82% Complete

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

Progress with value

If you want to display the numeric value inside the bar, place the percentage text directly in the .progress-bar.

{% capture html -%}

10%

35%

90%

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

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 -%}

24% Complete

45% Complete

64% Complete

38% Complete

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

Multiple progress bars

You can stack multiple progress bars on top of each other to create a visually appealing design. This can be done by adding multiple .progress elements inside a .progress-stacked container.

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

This is how it looks:

{% capture html -%}

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

Striped progress

You can create a striped progress bar by adding the .progress-bar-striped class to the .progress-bar element.

{% capture html -%}

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

Animated progress

To animate stripes, add the .progress-bar-animated class to a striped progress bar.

{% capture html -%}

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

Separated progress

Use .progress-separated to make stacked segments easier to read when values are close to each other.

{% capture html -%}

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

Progress background

By using a progress bar component as a background element, designers can create a dynamic and engaging visual experience for users. For example, the progress bar could be used to represent the completion of a long-term goal or project, such as a fundraising campaign or construction project. As users interact with the page, the progress bar could gradually fill up, creating a sense of momentum and progress.

Thanks to this you can create a nice looking statistics section:

{% capture html -%} {% include "ui/progressbg.html" value="65" text="Poland" show-value=true %} {% include "ui/progressbg.html" value="35" text="Germany" show-value=true %} {% include "ui/progressbg.html" value="28" text="United States" show-value=true %} {% include "ui/progressbg.html" value="20" text="United Kingdom" show-value=true %} {% include "ui/progressbg.html" value="15" text="France" show-value=true %} {%- endcapture %} {% include "docs/example.html" html=html column-full-width %}

Progress background colors

You can combine progress background with contextual light colors to better separate categories.

{% capture html -%} {% include "ui/progressbg.html" value="75" text="Success" color="success-lt" show-value=true %} {% include "ui/progressbg.html" value="60" text="Warning" color="warning-lt" show-value=true %} {% include "ui/progressbg.html" value="40" text="Danger" color="danger-lt" show-value=true %} {% include "ui/progressbg.html" value="90" text="Info" color="info-lt" show-value=true %} {%- endcapture %} {% include "docs/example.html" html=html column-full-width %}