VOOZH about

URL: https://www.geeksforgeeks.org/bootstrap/bootstrap-5-progress-striped/

⇱ Bootstrap 5 Progress Striped - GeeksforGeeks


  • Courses
  • Tutorials
  • Interview Prep

Bootstrap 5 Progress Striped

Last Updated : 8 Dec, 2022

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

Comment

Explore