Bootstrap progress bar
Brief introduction
In this tutorial, you'll see how to create progress bar loading Bootstrap, redirect, or operating state.
Basic, stripes and animated progress bar examples
Examples
<Div class = "row">
<Div class = "span4">
<H3> a substantially vertical progress bar </ h3>
<Div class = "progress">
<Div class = "bar"
style = "width: 60%;"> </ div>
</ Div>
<H3> striped progress bar with a 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 ->
View online examples
Note that if you want to display a third progress bar, add '.active' class to make it sporty. Bootstrap using css3 transition effects to create the animation. You can also adjust the width of the progress bar dynamically by JavaScript. This makes it possible to grasp the progress of behavior.
When you create a progress bar, you can use other colors.
With the other colors of the progress bar instance
Examples
<Div class = "row">
<Div class = "span4">
<H3> The progress bar may also have other 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 ->
View online examples
Browser Support
We have tested the above two examples in different browsers. We found, Firefox 12 and Chrome 19.0.1084.52 are able to display properly, but can not display animation in Opera 11.62, even if you can see the stripes and gradients. In Internet Explorer 8, all of the display are poor, no animation, no stripes and gradients.
Click here to download the tutorial to use all the HTML, CSS, JS and image files.