Progress Bar

Bootstrap progress bar are used to let a user know how far they are through a process, this can be for a file upload, loading screen or goal tracking. They are based on two main HTML components the container and the bar.

1. The Basic Structure

In order to have a progress bar you will need to have the wrapper <div> with the class .progress and an inner <div> with the class .progress-bar.

.progress: This is the gray background “track.”
.progress-bar: The colored bar that gets animated. The length can be set using CSS width.

HTML

<div class="progress">
  <div class="progress-bar" style="width: 70%"></div>
</div>

2. Adding Labels and Height

Sometimes for the in text you want show the exact percent or to make the bar thicker.

Labels: Simply put text inside the .progress-bar div.
Height: To change how tall the bar is, set a height value on the outer .progress container.

HTML

<div class="progress" style="height: 30px;">
  <div class="progress-bar" style="width: 25%;">25% Complete</div>
</div>

3. Colors and Styles

Bootstrap has pre-defined class,which can alter the effect of the bar,which is very quick.

Background Colors

Apply the usual Bootstrap utility classes such as bg-success (green) and bg-info (blue), bg-warning (yellow), or bg-danger (red).

Striped and Animated

.progress-bar-striped: Adds a diagonal striped (candy-cane like) pattern to the progress-bar.
.progress-bar-animated: This makes those stripes move across the bar from right to left, which is particularly nice to indicate something “active” and not frozen.

HTML

<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" style="width: 60%"></div>
</div>

4. Multiple Bars (Stacked)

If you want to display different segments in a line (e.g., used space, free space), you can place many .progress-bar divs inside a single .progress container.

5. Accessibility (Making it “Smart”)

Looking at the width alone will make it right to sighted users, but for people with screen readers you need the additional attributes to give users some context:

Attribute	Purpose
`role="progressbar"`	Tells the computer “this is a progress bar.”
`aria-valuenow="70"`	The current value.
`aria-valuemin="0"`	The starting point (usually 0).
`aria-valuemax="100"`	The end goal (usually 100).