• Welcome to Blaszok the most advanced shopping theme ever crated. We are sure it will fit all your needs. Remember if you have any suggestions or ideas for future updates please share them.

  • Useful Links

    Donec placerat adipiscing sapien id consequat. Donec nec auctor nisl. Curabitur hendrerit ultricies ligula ac blandit.

    • FAQ
    • Size Guide
    • Pressroom
    • Privacy Policy
    • Career
    • Shipping
  • Customer Service

    +48 800 801 802

    Free helpline.
    For stationary and mobile phones.

    Contact Form
Home / Styles / Progress Bars

Progress Bars

Examples and markup

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.