Get Karik Now

Progress Bar

Stacked bars, animated backgrounds, and text labels.

  1. Home
  2. Elements
  3. Progress

Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don???t use the HTML5 <progress> element, ensuring you can stack progress bars, animate them, and place text labels over them.

Basic

Use the .progress as a wrapper to indicate the max value of the progress bar and user the inner .progress-bar to indicate the progress so far.

  
<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Color

Use the .bg-[brand | primary | success | info | warning | danger | dark | light] as a wrapper to indicate the max value of the progress bar and user the inner .progress-bar to change the appearance of individual progress bars.

  
<div class="progress">
    <div class="progress-bar bg-primary" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Labels

Add labels to your progress bars by
placing text within the .progress-bar.

50%
25%
45%
65%
85%
  
<div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
</div>
Multiple bars / Striped bar

Include multiple progress bars in a progress component if you need.

Add .progress-bar-striped to any .progress-bar to apply a stripe via CSS gradient over the progress bar???s background color.

The striped gradient can also be animated. Add .progress-bar-animated to .progress-bar to animate the stripes right to left via CSS3 animations.

 
<!--Multiple bars-->
<div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
    <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
    <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<!--Striped bars-->
<div class="progress">
    <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>