Prev Page
Next Page  
Bootstrap Progress Bars

Progress bars can be used for showing the progress of a task or action to the users. In Bootstrap, there are several types of progress bars.

Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in Internet Explorer 9 and below or older versions of Firefox. Opera 12 does not support animations.

Default Progress Bar
The class .progress within a <div> element is used to create a default progress bar in bootstrap.
	
<!DOCTYPE html>
<html>
<head>
   <title>Default Progress Bar</title>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container-fluid">

 <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="72" 
       aria-valuemin="0" aria-valuemax="100" style="width:72%;">
        <span class="sr-only">72% Complete</span>
      </div>
    </div>

</div>

</body>
</html>
Output :
72% Complete
Progress Bar with label
Please Remove the <span> with .sr-only class from within the progress bar to show a visible percentage.
<!DOCTYPE html>
<html>
<head>
   <title>Progress with label</title>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container-fluid">

 <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="72" 
       aria-valuemin="0" aria-valuemax="100" style="width:72%;">
        72% Complete
      </div>
    </div>

</div>

</body>
</html>
Output :
72% Complete
Contextual Alternatives
Contextual classes are used to provide "meaning through colors". The contextual classes that can be used with progress bars are:
<!DOCTYPE html>
<html>
<head>
   <title>Contextual Alternatives</title>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container-fluid">

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" 
  aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    45% Complete
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" 
  aria-valuenow="27" aria-valuemin="0" aria-valuemax="100" style="width: 27%">
    27% Complete
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" 
  aria-valuenow="63" aria-valuemin="0" aria-valuemax="100" style="width: 63%">
    63% Complete
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" 
  aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%">
    90% Complete
  </div>
</div>

</div>

</body>
</html>
Output :
45% Complete
27% Complete
63% Complete
90% Complete
Striped Progress Bars
To create the stripped progress bar just add an extra class .progress-striped to the .progress base class, as shown in the example below:
<!DOCTYPE html>
<html>
<head>
   <title>Striped Progress Bars</title>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container-fluid">

<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" 
   role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" 
   style="width: 45%">
    45% Complete
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" 
   role="progressbar" aria-valuenow="27" aria-valuemin="0" aria-valuemax="100" 
   style="width: 27%">
    27% Complete
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped"
   role="progressbar" aria-valuenow="63" aria-valuemin="0" aria-valuemax="100" 
   style="width: 63%">
    63% Complete
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" 
  role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" 
  style="width: 90%">
    90% Complete
  </div>
</div>

</div>

</body>
</html>
Output :
45% Complete
27% Complete
63% Complete
90% Complete
Animated Prgress Bar
Add .active to .progress-bar-striped to animate the stripes right to left. Not available in IE9 and below.
<!DOCTYPE html>
<html>
<head>
   <title>Animated Prgress Bar</title>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container-fluid">

    <div class="progress progress-striped active">
      <div class="progress-bar progress-bar-warning" role="progressbar"
       aria-valuenow="81" aria-valuemin="0" aria-valuemax="100" style="width:81%">
        81% Complete
      </div>
    </div>

</div>

</body>
</html>
Output :
81% Complete
Stacked Progress Bar
You can also place multiple bars into the same progress bar to stack them.
<!DOCTYPE html>
<html>
<head>
   <title>Stacked Progress Bars</title>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container-fluid">

    <div class="progress">
      <div class="progress-bar progress-bar-success" style="width: 45%">
        Mobiles
      </div>
      <div class="progress-bar progress-bar-warning" style="width: 23%">
        Laptops
      </div>
      <div class="progress-bar progress-bar-danger" style="width: 12%">
        Desktops
      </div>
    </div>

</div>

</body>
</html>
Output :
Mobiles
Laptops
Desktops
  Prev Page
Next Page