Progress

Progress components are built with two HTML elements, some CSS to set the width, and a few attributes.


                    <div class="progress bg-icecloud-100">

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

                    </div>

Labels

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

45%


                    <div class="progress bg-icecloud-100" style="height: 32px;">

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

                        45%</div>

                    </div>

Backgrounds

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


                    <div class="progress bg-icecloud-100 mb-3">

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

                    </div>

                    <div class="progress bg-icecloud-100 mb-3">

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

                    </div>

Height

We only set a height value on the .progress, so if you change that value the inner .progress-bar will automatically resize accordingly.


                    <div class="progress bg-icecloud-100" style="height: 5px;">

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

                    </div>

Progress

Labels

Backgrounds

Height

Jump to