Bootstrap 3 Progress bars, Full details of Bootstrap 3 Progress bars

Bootstrap Tutorial

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 :

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

Bootstrap Tutorial