progress-bars.md

Progress Bars

It has the following design:

Horizontal Progress Bar

<div class="progress">
    <div class="progress-bar" style="width: 70%;">Content</div>
</div>

parameters:

1) Background color - sets the color of the background. Can take values - progress-info, progress-success, progress-warning, progress-danger.

<div class="progress">
    <div class="progress-bar progress-bar-success" style="width: 70%;">Content</div>
</div>

2) striped - uses a gradient to create a striped effect.

<div class="progress progress-striped">
   <div class="progress-bar" style="width: 70%;">Content</div>
</div>

3) animated striped - add.activeto.progress-stripedto animate the stripes right to left.

<div class="progress progress-striped active">
    <div class="progress-bar" style="width: 70%;">Content</div>
</div>

4) animated - sets the animation by adding the attributedata-appear-progress-animation.

<div class="progress" data-appear-progress-animation="70%">
   <div class="progress-bar">Content</div>
</div>