Loading...

###### Don't Miss Out! Our new update has been released.

###### Something you love is now on sale!

Buy now !

### 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"><;span class="txt-primary progress-label">30 MB Data</span><;span class="animate-circle"></span></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"><;span class="txt-primary progress-label">50 MB Data</span><;span class="animate-circle"></span></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"><;span class="txt-primary progress-label">75 MB Data</span><;span class="animate-circle"></span></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"><;span class="txt-primary progress-label">90 MB Data</span><;span class="animate-circle"></span></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="custom-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>