# 
## Progress Bar
A **progress bar** is a visual representation to show the progress of a task or an operation. Progress bar plays a vital role in many web applications to show the progress of action to users.  Bootstrap offers different progress bars, depending upon multiple parameters like color, height, shape, or style.

## How to create a progress bar in bootstrap 4
To create a progress bar in bootstrap, we use the `.progress` as a wrapper class in the container. To set the length and width of the progress bar, we use the attributes of the aria value. 

To create progress bars with different colors and styles, we use utility classes, also known as **contextual classes**, in the background. These utility classes are:

* `bg-success`
* `bg- info`
* `bg-light`


* `bg-dark`
* `bg-danger`
* `bg-warning` 

To create an animated striped progress bar, we use `.progress-bar-animated`. 

>  Note: Internet Explorer 9 and earlier does not support the animated progress bar because IE uses _CSS3_ transitions and animations to achieve some of their effects.

## Progress bar with a label
To create a progress bar with label or text, the following code is used:




<!DOCTYPE html>
<html lang="en">
   <head>
      
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
   </head>
   <body>
      
      <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" ></script>
      <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
      <h2>Basic Progress Bar</h2>
      <div class="progress">
         
         <div class="progress-bar" role="progressbar" aria-valuenow="40"
            aria-valuemin="0" aria-valuemax="100" style="width:40%"> 
            40% Complete
         </div>
      </div>
   </body>
</html>

codemirror

## Explanation
**Line 18**: We generate a simple progress bar with `aria-valuenow=` value= `40`.

## Progress bar with colors
To use different colors in the progress bar, we use contextual classes in code. The following is an example:

<!DOCTYPE html>
<html lang="en">
   <head>
      
      <meta charset="utf-8">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
   </head>
   <body>
      <br>
      
      <h2> Green Bar</h2>
      <div class="progress">
         <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="30"
            aria-valuemin="0" aria-valuemax="100" style="width:30%">
            30% Completed (success)
            
         </div>
      </div>
      <br>
      <h2>Blue Bar</h2>
      <div class="progress">
         <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="55"
            aria-valuemin="0" aria-valuemax="100" style="width:55%">
            55% Completed (info)
            
         </div>
      </div>
      <br>
      <h2>Yellow Bar</h2>
      <div class="progress">
         <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"
            aria-valuemin="0" aria-valuemax="100" style="width:60%">
            60% Completed (warning)
            
         </div>
      </div>
      <br>
      <h2>Red Bar</h2>
      <div class="progress">
         <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="85"
            aria-valuemin="0" aria-valuemax="100" style="width:85%">
            85% Completed (danger)
            
         </div>
      </div>
   </body>
</html>

## Explanation
* **Line 15**: We have a success progress bar in green color using the `progress-bar-success` subclass.
* **Line 24**: We have an information progress bar in blue color using the `progress-bar-info` subclass.
* **Line 33**:  We have a yellow progress bar using the `progress-bar-warning` subclass.
* **Line 42**: We have a red progress bar using the `progress-bar-danger` subclass.

## Animated striped progress bar
To create animated striped progress bars, add `.progress-bar-animated` or `.progress-bar-animated`. An example of an animated striped bar is as follows:



<!DOCTYPE html>
<html lang="en">
   <head>
      
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
   </head>
   <body>
      
      <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" ></script>
      <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
      <h2>Basic Progress Bar</h2>  
      <div class="progress">
         <div class="progress-bar progress-bar-striped progress-bar-animated bg-secondary" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
            20% Complete
         </div>
         
      </div>
      <br>  
      <div class="progress">
         <div class="progress-bar progress-bar-striped progress-bar-animated bg-alert" role="progressbar" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100">
            65% Progress
         </div>
         
      </div>
      <br>  
      <div class="progress">
         <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" style="width: 85%" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">
            85% Progress
         </div>
         
      </div>
      <br>  
      <div class="progress">
         <div class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
            90% Progress
         </div>
      </div>
   </body>
</html>

## Explanation
As highlighted above, we generate stripped progress bars in Gray, Blue, Red, and dull green color. The stripped bars inherit from the `.progress-bar` class in the code widget.

What is the progress bar in bootstrap 4?

Bootstrap 4 progress bars visually represent task completion using contextual classes for colors, styles, and animations.