Preview
Code Example
<div class="progress"> <div class="progress-bar" data-progress="0"></div> </div> <div class="progress"> <div class="progress-bar" data-progress="25%"></div> </div> <div class="progress"> <div class="progress-bar" data-progress="50%"></div> </div> <div class="progress"> <div class="progress-bar" data-progress="75%"></div> </div> <div class="progress"> <div class="progress-bar" data-progress="100%"></div> </div>
Labels
Add labels to your progress bars by placing text within the .progress-bar.
Code Example
<div class="progress"> <div class="progress-bar" data-progress="0">0</div> </div> <div class="progress"> <div class="progress-bar" data-progress="25%">25%</div> </div> <div class="progress"> <div class="progress-bar" data-progress="50%">50%</div> </div> <div class="progress"> <div class="progress-bar" data-progress="75%">75%</div> </div> <div class="progress"> <div class="progress-bar" data-progress="100%">100%</div> </div>
Height
We only set a height value on the .progress, so if you change that value the inner .progress-bar will automatically resize accordingly.
Code Example
<div class="progress" style="height: 1px;"> <div class="progress-bar" data-progress="25%"></div> </div> <div class="progress" style="height: 4px;"> <div class="progress-bar" data-progress="25%"></div> </div> <div class="progress" style="height: 8px;"> <div class="progress-bar" data-progress="50%"></div> </div>
Striped
Add .progress-bar-striped to any .progress-bar to apply a stripe via CSS gradient over the progress bar’s background color.
Code Example
<div class="progress"> <div class="progress-bar progress-bar-striped" data-progress="105"></div> </div> <div class="progress"> <div class="progress-bar progress-bar-striped bg-success" data-progress="25%"></div> </div> <div class="progress"> <div class="progress-bar progress-bar-striped bg-info" data-progress="50%"></div> </div> <div class="progress"> <div class="progress-bar progress-bar-striped bg-warning" data-progress="75%"></div> </div> <div class="progress"> <div class="progress-bar progress-bar-striped bg-danger" data-progress="100%"></div> </div>
Animated stripes
The striped gradient can also be animated. Add .progress-bar-animated to .progress-bar to animate the stripes right to left via CSS3 animations.
Code Example
<div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-animated" data-progress="50%"></div> </div>