NEWSLETTER HUB|BRANDHUB

We couldn’t find anything that matched your searched term

  • PAGES

  • COMPONENTS

  • Brand guidelines

  • Insights

Documentation

Components

Display the completion of a task by showing visually how much is done and how much is left. The longer or difficult the journey is, the higher the progress bar will be useful to guide the user to the end.

Example
<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"
    role="progressbar"
    style="width: 75%"
    aria-valuenow="75"
    aria-valuemin="0"
    aria-valuemax="100"
  ></div>
</div>
<div class="progress">
  <div
    class="progress-bar bg-secondary"
    role="progressbar"
    style="width: 55%"
    aria-valuenow="55"
    aria-valuemin="0"
    aria-valuemax="100"
  ></div>
</div>