Bootstrap Tutorial - Bootstrap Progress bars

Basic Progress bars

Default progress bar with a vertical gradient.

<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
<!--   w w w.  ja  va2  s . co m-->
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script src="http://java2s.com/style/bootstrap.min.js"></script>

</head>
<body style='margin: 20px;'>

  <div class="progress">
    <div class="progress-bar" style="width: 60%;"></div>
  </div>
</body>
</html>

Click to view the demo

Progress Bar Contextual alternatives

Progress bars use some of the same button and alert classes for consistent styles.

<!DOCTYPE HTML>
<html> 
<head> 
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
<!--from w  w w  .ja v  a2s.  co  m-->
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script src="http://java2s.com/style/bootstrap.min.js"></script>

</head>
<body style='margin:20px;'>

      <div class="progress" style="margin-bottom: 9px;">
        <div class="progress-bar progress-bar-info" style="width: 20%"></div>
      </div>
      <div class="progress" style="margin-bottom: 9px;">
        <div class="progress-bar progress-bar-success" style="width: 40%"></div>
      </div>
      <div class="progress" style="margin-bottom: 9px;">
        <div class="progress-bar progress-bar-warning" style="width: 60%"></div>
      </div>
      <div class="progress">
        <div class="progress-bar progress-bar-danger" style="width: 80%"></div>
      </div>
</body> 
</html>

Click to view the demo

Striped Progress Bars

Uses a gradient to create a striped effect. Not available in IE8.

<!DOCTYPE HTML>
<html> 
<head> 
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
<!--  w  ww .  j  a  v a  2s  .  co m-->
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script src="http://java2s.com/style/bootstrap.min.js"></script>

</head>
<body style='margin:20px;'>

      <div class="progress progress-striped" style="margin-bottom: 9px;">
        <div class="progress-bar progress-bar-info" style="width: 20%"></div>
      </div>
      <div class="progress progress-striped" style="margin-bottom: 9px;">
        <div class="progress-bar progress-bar-success" style="width: 40%"></div>
      </div>
      <div class="progress progress-striped" style="margin-bottom: 9px;">
        <div class="progress-bar progress-bar-warning" style="width: 60%"></div>
      </div>
      <div class="progress progress-striped">
        <div class="progress-bar progress-bar-danger" style="width: 80%"></div>
      </div>

</body> 
</html>

Click to view the demo

Animated Progress Bar

Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE.

<!DOCTYPE HTML>
<html> 
<head> 
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
<!--  w w w . j  a va 2 s.com-->
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script src="http://java2s.com/style/bootstrap.min.js"></script>

</head>
<body style='margin:20px;'>

<div class="progress progress-striped active">
  <div class="progress-bar" style="width: 45%"></div>
</div>

</body> 
</html>

Click to view the demo

Stacked Progress Bars

Place multiple bars into the same .progress to stack them.

<!DOCTYPE HTML>
<html> 
<head> 
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
<!--  ww w .j ava  2 s.  c  om-->
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script src="http://java2s.com/style/bootstrap.min.js"></script>

</head>
<body style='margin:20px;'>

<div class="progress">
   <div class="progress-bar progress-bar-success" style="width: 35%"></div>
   <div class="progress-bar progress-bar-warning" style="width: 20%"></div>
   <div class="progress-bar progress-bar-danger" style="width: 10%"></div>
</div>

</body> 
</html>

Click to view the demo