Twitter Bootstrap progress bars tutorial

Last update on August 19 2022 21:51:33 (UTC/GMT +8 hours)

Introduction

In this tutorial, you will see how to create progress bars for loading, redirecting, or action status, using Twitter Bootstrap.

Example of basic, striped and animated Progress bars

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of using default thumbnails from w3resource.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0 ">
<meta name="description" content="Example of using default thumbnails from w3resource.com">
<meta name="author" content="">

<!-- Le styles -->
<link href="bootstrap-2.0.3.css" rel="stylesheet">
<link href="twitter-bootstrap-v2/docs/assets/css/example-fixed-layout.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="twitter-bootstrap-v2/docs/examples/images/favicon.ico">
<link rel="apple-touch-icon" href="twitter-bootstrap-v2/docs/examples/images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-114x114.png">
</head>

<body>
<div class="container">
<div class="row">
<div class="span4">
<h3>A basic Progress Bar with vertical gradient</h3>
<div class="progress">
<div class="bar" style="width: 60%;"></div>
</div>
<h3>A striped Progress Bar, uses gradient to create a striped effect</h3>
 <div class="progress progress-striped">
<div class="bar" style="width: 60%;"></div>
</div>
<h3>An animated Progress Bar</h3>
     <div class="progress progress-striped active">
  <div class="bar" style="width: 50%;"></div>
</div>
        </div>
      </div>

      <hr>
</div> <!-- /container -->
</body>
</html>

View example live

Notice that, in case of the third Progress bar shown, adding '.active' class makes it animated. Bootstrap uses css3 transitions for creating this animation. You may also adjust the width of the bar dynamically via JavaScript. This way, the behavior of the progress may be controlled.

You may use additional colors while creating progress bars.

Example of progress bars with additional colors

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of Progress Bars with additional colors using Twitter Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0 ">
<meta name="description" content="Example of Progress Bars with additional colors using Twitter Bootstrap, created by w3resource">
<meta name="author" content="">

<!-- Le styles -->
<link href="bootstrap-2.0.3.css" rel="stylesheet">
<link href="twitter-bootstrap-v2/docs/assets/css/example-fixed-layout.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="twitter-bootstrap-v2/docs/examples/images/favicon.ico">
<link rel="apple-touch-icon" href="twitter-bootstrap-v2/docs/examples/images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-114x114.png">
</head>

<body>
<div class="container">
<div class="row">
<div class="span4">
<h3>Progress bars may also have additional colors</h3>
<div class="progress progress-info progress-striped" style="margin-bottom: 9px;">
 <div class="bar" style="width: 20%"></div>
</div>
<div class="progress progress-success progress-striped active" style="margin-bottom: 9px;">
<div class="bar" style="width: 40%"></div>
</div>
<div class="progress progress-warning progress-striped" style="margin-bottom: 9px;">
 <div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-danger progress-striped active" style="margin-bottom: 9px;">
 <div class="bar" style="width: 80%"></div>
</div>
</div>
</div>
</div>

<hr>
</div> <!-- /container -->
</body>
</html>

View the example live.

Browser support

We have tested both of the above examples with different browsers. We found that, it works perfectly with Firefox 12 and Chrome 19.0.1084.52 m. But it does not show the animation in Opera 11.62, though, you may see the stripes and gradients. In Internet Explorer 8, it does not look good at all. No animation, not even gradient or stripes

You may download all the HTML, CSS, JS and image files used in our tutorials here.

Previous: Twitter Bootstrap Thumbnails tutorial
Next: Twitter Bootstrap breadcrumbs tutorial