Products

Progress bars

Basic

Default progress bar with a vertical gradient.

 
  1. <div class="progress">
  2.  <div class="bar" style="width: 60%;"></div>
  3. </div>

Striped

Uses a gradient to create a striped effect. Not available in IE7-8.

 
  1. <div class="progress progress-striped">
  2.  <div class="bar" style="width: 20%;"></div>
  3. </div>

Animated

Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE.

 
  1. <div class="progress progress-striped active">
  2.  <div class="bar" style="width: 40%;"></div>
  3. </div>

Stacked

Place multiple bars into the same .progress to stack them.

 
 
 
  1. <div class="progress">
  2.  <div class="bar bar-success" style="width: 35%;"></div>
  3.  <div class="bar bar-warning" style="width: 20%;"></div>
  4.  <div class="bar bar-danger" style="width: 10%;"></div>
  5. </div>

Options

Additional colors

Progress bars use some of the same button and alert classes for consistent styles.

 
 
 
 
  1. <div class="progress progress-info">
  2.  <div class="bar" style="width: 20%"></div>
  3. </div>
  4. <div class="progress progress-success">
  5.  <div class="bar" style="width: 40%"></div>
  6. </div>
  7. <div class="progress progress-warning">
  8.  <div class="bar" style="width: 60%"></div>
  9. </div>
  10. <div class="progress progress-danger">
  11.  <div class="bar" style="width: 80%"></div>
  12. </div>

Striped bars

Similar to the solid colors, we have varied striped progress bars.

 
 
 
 
  1. <div class="progress progress-info progress-striped">
  2.  <div class="bar" style="width: 20%"></div>
  3. </div>
  4. <div class="progress progress-success progress-striped">
  5.  <div class="bar" style="width: 40%"></div>
  6. </div>
  7. <div class="progress progress-warning progress-striped">
  8.  <div class="bar" style="width: 60%"></div>
  9. </div>
  10. <div class="progress progress-danger progress-striped">
  11.  <div class="bar" style="width: 80%"></div>
  12. </div>

Browser support

Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.

Versions earlier than Internet Explorer 10 and Opera 12 do not support animations.

 

Be With Us

This email address is being protected from spambots. You need JavaScript enabled to view it.
This email address is being protected from spambots. You need JavaScript enabled to view it.
Tel 0033 1 77 62 54 10


QuesCom SAS au capital de 100.200 € Siret 793 176 777 00019 – RCS Nanterre 793 176 777 - TVA Intra communautaire FR 63 793176777
QuesCom ™ - Les logiciels QuesCom ont fait l’objet d'un copyright déposé.