Introduction
In this article I explain Progress Bars with Twitter Bootstrapping in PHP. A Progress Bar is a very simple. You can create them using the Twitter Bootstrap package and bootstrap2.0.3.css file. You can download the Twitter Bootstrapping file from the URL http://twitter.github.com/ otherwise you can download the full code of this article. After downloading this file you will put it in your PHP directory, then you will start the Progress Bar using this code. You can create a Progress Bar for loading and action status etcetera using the Twitter Bootstrap file.
Example
<html>
<head>
<title>Progress Bar</title>
// this is you bootstrap2.0.3.css file
<link href="bootstrap.css" rel="stylesheet">
<link href="twitter-bootstrap-v2/docs/assets/css/example-fixed-layout.css" rel="stylesheet">
<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="span5">
<h3>Basic Progress Bar</h3>
<div class="progress">
<div class="bar" style="width: 70%;"></div>
</div>
<h3>Striped Progress Bar</h3>
<div class="progress progress-striped">
<div class="bar" style="width: 50%;"></div>
</div>
<h3>Animated progress barr</h3>
<div class="progress progress-striped active">
<div class="bar" style="width: 70%;"></div>
</div>
</div>
</div>
<hr>
</div>
</body>
</html>
Output
![progress.jpg]()
In the next example I show the use of a Progress Bar with additional color.
Example
<html>
<head>
<title>Progress Bar with Additional Color</title>
// this is you bootstrap2.0.3.css file
<link href="bootstrap.css" rel="stylesheet">
<link href="twitter-bootstrap-v2/docs/assets/css/example-fixed-layout.css" rel="stylesheet">
<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>
//start div container
<div class="container">
<div class="row">
<div class="span5">
<h3>Progress Bars with additional colors</h3>
<div class="progress progress-info progress-striped" style="margin-bottom: 10px;">
<div class="bar" style="width: 10%"></div>
</div>
<div class="progress progress-success progress-striped active" style="margin-bottom: 10px;">
<div class="bar" style="width: 30%"></div>
</div>
<div class="progress progress-warning progress-striped" style="margin-bottom: 10px;">
<div class="bar" style="width: 50%"></div>
</div>
<div class="progress progress-danger progress-striped active" style="margin-bottom: 10px;">
<div class="bar" style="width: 70%"></div>
</div>
</div>
</div>
</div>
<hr>
</div>
//end div container
</body>
</html>
Output
![progress1.jpg]()