Bootstrap - Progress Bars

This chapter discusses about Bootstrap progress bars. Progress bars in Bootstrap are UI components that display the progress or completion status of a task or process. They are typically used to visually indicate the progress of an operation, such as file uploads, form submissions, or loading of data.

Bootstrap provides a set of in-built classes to create progress bars with different styles, sizes and animations. Bootstrap also provides additional classes and options for customizing the appearance and behavior of progress bars, such as setting different colors, adding labels, using striped or animated progress bars, and stacking multiple progress bars together.

• Use the .progress as a wrapper to show the max value of the progress bar.

• Use the inner .progress-bar to show the progress so far.

• The .progress-bar requires an inline style, utility class, or custom CSS to set their width.

• The .progress-bar also requires some role and aria attributes to make it accessible.

• The .progress-stacked can be used to create multiple/stacked progress bars.

Basic Progress Bar

Here's an example of a basic Bootstrap progress bar:

Example

You can edit and try running this code using the Edit & Run option.

   
      
      
      
      
      
      
   
   
      
Progress Bar



      

         

      


      

         

      


      

         

      


      

         

      


      

         

      
   

Bar Sizing

Width

Bootstrap provides a complete list of utilities for setting width. Let us see an example:

Example

You can edit and try running this code using the Edit & Run option.

   
         
         
         
         
         
         
   
   
         
Progress Bar



         

           

         
   

Height

By default the height of a progress bar is 1rem, but it can be changed using the CSS height property. You must set the same height for the progress container and the progress bar.

Height value can be set only on the .progress, so once the value of height is changed in the .progress container, the inner .progress-bar automatically resizes.

Example

You can edit and try running this code using the Edit & Run option.

   
      
      
      
      
      
      
   
   
      
Progress Bar Height


      

        

      
      

      

        

      
   

Labels

Labels can be added to the progress bars by placing text within the .progress-bar.

Example

You can edit and try running this code using the Edit & Run option.

   
      
      
      
      
      
      
   
   
      
Progress Bar Label


      

         
50%
         
   

Label Overflow Visible/Hidden

• In order to avoid the content getting bleed out of the bar, the content inside the .progress-bar is controlled with overflow: hidden

• Use overflow: visible from overflow utilities to make the content capped and become readable. This is useful when the progress bar is shorter than the label.

• Define an explicit text color to make the text readable.

Example

You can edit and try running this code using the Edit & Run option.

   
      
      
      
      
      
      
   
   
      
Progress Bar Long Label


      

         
Overflow visible on progress bar, but the label is too long, but the label is too long,but the label is too long,but the label is too long,but the label is too long,but the label is too long,but the label is too long
      
      

      

      
Overflow hidden on progress bar, but the label is too long, but the label is too long,but the label is too long,;/div>
      

   

Background

The appearance of individual progress bar can be changed using the background utility classes.

The progress bar is blue by default (primary).

Example

You can edit and try running this code using the Edit & Run option.

   
      
      
      
      
      
      
   
   
      
Progress Bar Background


      
         

           

         



      
         

           

         



      
         

           

         



      
         

           

         



      
         

           

         



      
         

            

         



      
         

            

         



      
         

           

         



      
         

           

         

   

Accessibility tip: Use of color to the progress bars just provides a visual indication, and this will not be helpful to users of assistive technologies like screen readers. Make sure that the meaning is clear from the content itself.

Use alternative means to add clarity to the content using the .visually-hidden class.

In order to make the labels readable on a colored background, choose appropriate text colors.

Example

You can edit and try running this code using the Edit & Run option.

   
      
      
      
      
      
      
   
   
      
Progress Bar - Text Color