Progress

Backgrounds

Use background utility classes to change the appearance of individual progress bars.

<div class="progress">

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

                            </div>

Labels

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

25%

<div class="progress" style="height: 20px;">

                              <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>

                            </div>

Height

We only set a height value on the .progress wrapper.

<div class="progress" style="height: 8px;">...</div>

Multiple bars

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

<div class="progress">

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

                              <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>

Striped

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

<div class="progress">

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

                            </div>

Backgrounds

Use background utility classes to change the appearance of individual progress bars.

<div class="progress">

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

                            </div>

Labels

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

25%

<div class="progress" style="height: 20px;">

                              <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>

                            </div>

Height

We only set a height value on the .progress wrapper.

<div class="progress" style="height: 8px;">...</div>

Multiple bars

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

<div class="progress">

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

                              <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>

Striped

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

<div class="progress">

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

                            </div>

Huma

Huma is a beautifully crafted user interface for modern Business Admin Web Applications, with examples for many pages needed for Customer Relationship Management, Enterprise Resource Planning, Human Resources, Content Management System, Project Management, Tasks, eCommerce, Messaging and Account Management.

Follow us

English arrow_drop_down

Terms Privacy policy

Copyright 2019 © All rights reserved.