Bootstrap 5 Progress Striped

Last Updated : 08 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.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" 
        rel="stylesheet" /> 
</head> 
  
<body> 
    <div class="container text-center"> 
        <div class="my-4"> 
            <h3 class="text-success"> 
                GeeksforGeeks 
            </h3> 
              
            <h4>Bootstrap 5 Progress Striped</h4> 
        </div> 
  
        <p>Normal Progress Bar</p> 
        <div class="progress mb-4"> 
            <div class="progress-bar" role="progressbar" 
                style="width: 40%" aria-valuenow="40" 
                aria-valuemin="0" aria-valuemax="100"> 
            </div> 
        </div> 
  
        <p>Stripped Progress Bar</p> 
        <div class="progress mb-4"> 
            <div class="progress-bar progress-bar-striped" 
                role="progressbar" style="width: 50%" 
                aria-valuenow="50" aria-valuemin="0" 
                aria-valuemax="100"> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

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

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" 
        rel="stylesheet" /> 
</head> 
  
<body> 
    <div class="container text-center"> 
        <div class="my-4"> 
            <h3 class="text-success">GeeksforGeeks</h3> 
            <h4>Bootstrap 5 Progress Striped</h4> 
        </div> 
        <div class="progress mb-4"> 
            <div class="progress-bar progress-bar-striped" 
                role="progressbar" style="width:30%" 
                aria-valuenow="30"
                aria-valuemin="0" aria-valuemax="100"> 
            </div> 
        </div> 
        <div class="progress mb-4"> 
            <div class="progress-bar  
                progress-bar-striped bg-secondary"  
                role="progressbar" style="width:40%"
                aria-valuenow="40" aria-valuemin="0" 
                aria-valuemax="100"> 
            </div> 
        </div> 
        <div class="progress mb-4"> 
            <div class="progress-bar  
                progress-bar-striped bg-success"  
                role="progressbar" style="width: 50%"
                aria-valuenow="50" aria-valuemin="0" 
                aria-valuemax="100"> 
            </div> 
        </div> 
        <div class="progress mb-4"> 
            <div class="progress-bar  
                progress-bar-striped bg-info"  
                role="progressbar" style="width: 65%"
                aria-valuenow="65" aria-valuemin="0" 
                aria-valuemax="100"> 
            </div> 
        </div> 
        <div class="progress"> 
            <div class="progress-bar  
                progress-bar-striped bg-danger"  
                role="progressbar" style="width: 90%"
                aria-valuenow="90" aria-valuemin="0" 
                aria-valuemax="100"> 
            </div> 
        </div> 
    </div> 
<body> 
    
<html>