Bootstrap 5 Progress Striped

The Bootstrap 5 progress bar is used to show the progress of a task to the user. A progress bar displays how much your process progressed or is completed and left. The Progress Striped is used to change the appearance of the progress bar to striped.

Progress Striped Class:

• .progress-bar-striped: This class is used to create the striped progress bar. This class is used with the .progress-bar class.

Syntax:

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

 

Example 1: In this example, we set the normal progress bar and striped progress bar using progress classes.

Output:

👁 Image

Example 2: In this example, we set the progress striped bar with the different background colors.

Output:

👁 Image

Reference: https://getbootstrap.com/docs/5.0/components/progress/#striped