Progress

Initial Progress Bars

Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We use the progress as a wrapper to indicate the max value of the progress bar. The progress-bar requires an inline style, utility class, or custom CSS to set their width.

25%
50%
75%
100%
<div class="row">
 <div class="col">
   <div class="progress">
     <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"> </div>
   </div>
   <div class="progress">
     <div class="progress-bar bg-primary" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
   </div>
   <div class="progress">
     <div class="progress-bar bg-secondary" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
   </div>
   <div class="progress">
     <div class="progress-bar bg-success" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
   </div>
   <div class="progress">
     <div class="progress-bar bg-info" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div>
   </div>
 </div>
</div>

Striped Progress Bars

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

<div class="row">
 <div class="col">
   <div class="progress">
     <div class="progress-bar bg-primary progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
   </div>
   <div class="progress">
     <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
   </div>
   <div class="progress">
     <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
   </div>
   <div class="progress">
     <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
   </div>
 </div>
</div>

Animated Progress Bars

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

<div class="row">
 <div class="col">
   <div class="progress">
     <div class="progress-bar-animated bg-primary progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
   </div>
   <div class="progress">
     <div class="progress-bar-animated progress-bar-striped bg-warning" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
   </div>
   <div class="progress">
     <div class="progress-bar-animated progress-bar-striped bg-danger" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
   </div>
   <div class="progress">
     <div class="progress-bar-animated progress-bar-striped bg-success" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
   </div>
 </div>
</div>

Multiple Bars

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

<div class="row">
 <div class="col">
   <div class="progress">
     <div class="progress-bar bg-primary" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
     <div class="progress-bar bg-secondary" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
     <div class="progress-bar bg-success" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
   </div>
   <div class="progress">
     <div class="progress-bar bg-primary" role="progressbar" style="width: 10%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
     <div class="progress-bar bg-secondary" role="progressbar" style="width: 10%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
     <div class="progress-bar bg-success" role="progressbar" style="width: 10%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
     <div class="progress-bar bg-info" role="progressbar" style="width: 10%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
     <div class="progress-bar bg-warning" role="progressbar" style="width: 10%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
     <div class="progress-bar bg-danger" role="progressbar" style="width: 10%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
     <div class="progress-bar bg-primary" role="progressbar" style="width: 10%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
     <div class="progress-bar bg-light" role="progressbar" style="width: 10%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
   </div>
 </div>
</div>

Progress with Number Steps

Use the position-absolute to set progress numbers steps.

<div class="position-relative m-3 progress-number">
 <div class="progress progress-wrapper">
   <div class="progress-bar" role="progressbar" aria-label="Progress" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
 </div>
 <button class="position-absolute top-0 start-0 translate-middle btn-sm btn-primary rounded-circle" type="button">1</button>
 <button class="position-absolute top-0 start-50 translate-middle btn-sm btn-primary rounded-circle" type="button">2</button>
 <button class="progress-btn position-absolute top-0 start-100 translate-middle btn-sm rounded-circle" type="button">3</button>
</div>

Custom Progress Bars

Use the progress-bar-animated and progress-bar-striped to animate the stripes right to left.

0% Getting Started
30% Getting Uploading...
30%
60% Getting Pause...
60%
70% Getting Uploading...
70%
100% Completed
100%
<div class="row">
 <div class="col">
   <h6 class="mb-2">0% Getting Started </h6>
   <div class="progress mb-4">
     <div class="progress-bar-animated progress-bar-striped text-center" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
   </div>
   <h6 class="mb-2">30% Getting Uploading...</h6>
   <div class="progress mb-4">
     <div class="progress-bar-animated progress-bar-striped bg-primary text-center" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">30%</div>
   </div>
   <h6 class="mb-2">60% Getting Pause...</h6>
   <div class="progress mb-4">
     <div class="progress-bar-animated progress-bar-striped bg-secondary text-center" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">60%</div>
   </div>
   <h6 class="mb-2">70% Getting Uploading...</h6>
   <div class="progress mb-4">
     <div class="progress-bar-animated progress-bar-striped bg-success text-center" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">70%</div>
   </div>
   <h6 class="mb-2">100% Completed</h6>
   <div class="progress">
     <div class="progress-bar-animated progress-bar-striped bg-dark text-center" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div>
   </div>
 </div>
</div>

Small Progress Bars

Use sm-progress-bar class to change progress size to small.

30 MB Data
50 MB Data
75 MB Data
90 MB Data
<div class="row">
 <div class="col">
   <div class="progress sm-progress-bar overflow-visible mt-4">
     <div class="progress-bar-animated small-progressbar bg-primary rounded-pill progress-bar-striped" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
   </div>
   <div class="progress sm-progress-bar overflow-visible">
     <div class="progress-bar-animated small-progressbar bg-primary rounded-pill progress-bar-striped" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
   </div>
   <div class="progress sm-progress-bar overflow-visible">
     <div class="progress-bar-animated small-progressbar bg-primary rounded-pill progress-bar-striped" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
   </div>
   <div class="progress sm-progress-bar overflow-visible">
     <div class="progress-bar-animated small-progressbar bg-primary rounded-pill progress-bar-striped" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
   </div>
 </div>
</div>

Large Progress Bars

Use lg-progress-bar class to change progress size to large.

25%
50%
75%
100%
<div class="row">
 <div class="col">
   <div class="progress lg-progress-bar">
     <div class="progress-bar bg-primary" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
   </div>
   <div class="progress lg-progress-bar">
     <div class="progress-bar bg-secondary" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
   </div>
   <div class="progress lg-progress-bar">
     <div class="progress-bar bg-success" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
   </div>
   <div class="progress lg-progress-bar">
     <div class="progress-bar bg-info" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div>
   </div>
 </div>
</div>

Custom Height Progress Bars

Set a height value on the progress-bar, so if you change that value the outer progress will automatically resize accordingly.

<div class="row">
 <div class="col">
   <div class="progress" style="height: 1px;">
     <div class="progress-bar bg-primary" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
   </div>
   <div class="progress" style="height: 5px;">
     <div class="progress-bar bg-warning" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
   </div>
   <div class="progress" style="height: 11px;">
     <div class="progress-bar bg-danger" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
   </div>
   <div class="progress" style="height: 19px;">
     <div class="progress-bar bg-info" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
   </div>
 </div>
</div>

Step Progressbar

Use step-progress-wrapper class to make step progressbar.

  • 1

    Profile

  • 2

    Finance

  • 3

    Property

  • 4

    Review

  • 5

    Authorization
<div class="step-progress-box">
 <ul class="theme-scrollbar">
   <li><i class="bookmark-search" data-feather="user"></i>
     <div class="p-step first active">
       <p>1</p><i class="bookmark-search" data-feather="check"></i>
     </div>
     <h6>Profile</h6>
   </li>
   <li><i class="bookmark-search" data-feather="database"></i>
     <div class="p-step second active">
       <p>2</p><i class="bookmark-search" data-feather="check"></i>
     </div>
     <h6>Finance</h6>
   </li>
   <li><i class="bookmark-search" data-feather="home"></i>
     <div class="p-step third">
       <p>3</p><i class="bookmark-search" data-feather="check"></i>
     </div>
     <h6>Property</h6>
   </li>
   <li><i class="bookmark-search" data-feather="star"></i>
     <div class="p-step fourth">
       <p>4</p><i class="bookmark-search" data-feather="check"></i>
     </div>
     <h6>Review</h6>
   </li>
   <li><i class="bookmark-search" data-feather="check-circle"></i>
     <div class="p-step fifth">
       <p>5</p><i class="bookmark-search" data-feather="check"></i>
     </div>
     <h6>Authorization</h6>
   </li>
 </ul>
</div>