Bootstrap Tutorial - Bootstrap Progress Bar








Progress bars shows the progress for lengthy operations, such as file loading, redirecting.

The following example shows how to create a simple progress bar with vertical gradient.

<!--from  w w  w  .  j  a v a  2s. com-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head> 
<body>
<div class="bs-example">
    <div class="progress">
        <div class="progress-bar" style="width: 60%;">
            <span class="sr-only">60% Complete</span>
        </div>
    </div>
</div>
</body>
</html>

Click to view the demo





Stripped Progress Bar

To create the stripped progress bar, add class .progress-striped to the .progress base class.

The stripped progress bar is not supported in IE7-8.

<!-- ww  w .j a  va2  s  .com-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head> 
<body>
<div class="bs-example">
  <div class="progress progress-striped">
    <div class="progress-bar" style="width: 60%;">
      <span class="sr-only">60% Complete</span>
    </div>
  </div>
</div>
</body>
</html>

Click to view the demo





Animated progress bar

To create the animated progress bar, add the .active class to .progress-stripped.

The .active class animates the stripes from right to left.

The animated progress bar is not supported in IE7,IE7,IE9.

<!--  www  . j  a v  a2 s  .c om-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head> 
<body>
<div class="bs-example">
  <div class="progress progress-striped active">
    <div class="progress-bar" style="width: 60%;">
      <span class="sr-only">60% Complete</span>
    </div>
  </div>
</div>
</body>
</html>

Click to view the demo

Stacked Progress Bar

The following code shows how to place multiple bars into the same progress bar to stack them.

<!--   w  w  w.jav  a 2 s .  c  o m-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head> 
<body>
<div class="bs-example">
  <div class="progress">
    <div class="progress-bar progress-bar-success" style="width: 35%">
      <span class="sr-only">35% Complete (success)</span>
    </div>
    <div class="progress-bar progress-bar-warning" style="width: 20%">
      <span class="sr-only">20% Complete (warning)</span>
    </div>
    <div class="progress-bar progress-bar-danger" style="width: 10%">
      <span class="sr-only">10% Complete (danger)</span>
    </div>
  </div>
</div>
</body>
</html>

Click to view the demo

Progress Bars with Meaningful Classes

We can customize progressbar with various colors.

<!--from w w w  .ja  v a2s . c o m-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head> 
<body>
<div class="bs-example">
  <div class="progress">
    <div class="progress-bar progress-bar-info" style="width: 20%">
      <span class="sr-only">20% Complete</span>
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar progress-bar-success" style="width: 40%">
      <span class="sr-only">40% Complete</span>
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar progress-bar-warning" style="width: 60%">
      <span class="sr-only">60% Complete</span>
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar progress-bar-danger" style="width: 80%">
      <span class="sr-only">80% Complete</span>
    </div>
  </div>
</div>
</body>
</html>

Click to view the demo

Striped Progress Bars with Emphasis Classes

The following code shows how to striped progress bars with various colors.

<!--   w w  w.jav a2s  .  c  o  m-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head> 
<body>
<div class="bs-example">
    <div class="progress progress-striped">
        <div class="progress-bar progress-bar-info" style="width: 20%">
            <span class="sr-only">20% Complete</span>
        </div>
    </div>
    <div class="progress progress-striped">
        <div class="progress-bar progress-bar-success" style="width: 40%">
            <span class="sr-only">40% Complete</span>
        </div>
    </div>
    <div class="progress progress-striped">
        <div class="progress-bar progress-bar-warning" style="width: 60%">
            <span class="sr-only">60% Complete</span>
        </div>
    </div>
    <div class="progress progress-striped">
        <div class="progress-bar progress-bar-danger" style="width: 80%">
            <span class="sr-only">80% Complete</span>
        </div>
    </div>
</div>
</body>
</html>

Click to view the demo