How to create & use Bootstrap 5 progress bars?

Bootstrap 5 Progress Bars

Bootstrap Progress Bars

Bootstrap progress bars point progress of the current action/task.

Steps: to create bootstrap progress bar:

• Assign .progress to the container.
• Assign .progress-bar to the child element of the container.
• To set width of the progress bar, you have to use the CSS width property.

General Syntax

<div class="progress">
 <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></di

Progress Bar: Label

To create a progress bar label, place text inside .progress-bar.

General Syntax

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

Source Code

<div class="container mt-4">
  <h2 class="text-center mt-5">Bootstrap Progress Bar Label</h2>
  <div class="progress mt-5 mb-5">
    <div class="progress-bar" style="width: 60%;">60%</div>
  </div> <!--progress-->
</div><!--container-->

Progress Bar: Height

The default height of the progress bar is 16px. It can also be changed by assigning the CSS height property to the .progress element.

General Syntax

<!-- Progress bar with 1px height -->
<div class="progress mb-5" style="height: 22px;">
  <div class="progress-bar" style="width: 50%;">height:22px</div>
</div>
<!-- Progress bar with 20px height -->
<div class="progress" style="height: 25px;">
  <div class="progress-bar" style="width: 50%;">height:25px</div>
</div>

Progress Bar: Background Color

Bootstrap progress bar background color can be set using background utility classes.

General Syntax

<div class="progress mb-2">
  <div class="progress-bar bg-success" style="width: 25%;"></div>
</div>

Source Code

<div class="progress mt-4 mb-5">
 <div class="progress-bar bg-success" style="width: 25%;"></div>
</div>

Multiple bars: Inline Progress Bar

It includes more than one progress bar inside a progress component.

General Syntax

<div class="progress">
  <div class="progress-bar" style="width: 20%;"></div>
  <div class="progress-bar bg-success" style="width: 30%;"></div>
  <div class="progress-bar bg-info" style="width: 40%;"></div>
</div>

Source Code

<div class="container mt-4 mb-4">
  <div class="progress">
    <div class="progress-bar mt-3" style="width: 20%;"></div>
    <div class="progress-bar bg-success mt-3" style="width: 30%;"></div>
    <div class="progress-bar bg-info" style="width: 40%;"></div>
  </div>
</div><!--container-->

Stripped Progress Bar

Bootstrap striped progress bar can be created easily by adding .progress-bar-striped class to the .progress-bar.

General Syntax

<div class="progress-bar progress-bar-striped" ></div>

Source Code

<div class="progress">
 <div class="progress-bar progress-bar-striped" style="width: 10%;" ></div>
</div>

Bootstrap 5 Animated Progress Bar

To create a Bootstrap 5 animated progress bar, add .progress-bar-striped it to the .progress-bar element to create an animated progress bar.

General Syntax

<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 75%;"></div>
</div>

Source Code

<div class="container mt-4">
  <h2 class="text-center mt-5 mb-5">Animated Progress Bar</h2>
  <div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 75%;"></div>
  </div> <!--/progress-->
</div><!--container-->

If you want to learn more about Bootstrap progress bars, click here.