Progress

Documentation and examples for using boodoo's progress bars — displays the progress of a task or action on a page.

How it works

Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don't use the HTML <progress> element, ensuring you can stack progress bars, animate them, and place text labels within them.

Label example

25%

<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="25" aria-valuemin="0"
  aria-valuemax="100">
  <div class="progress-bar w-25"><span>25%</span></div>
</div>

Height

Set a height via .progress-sm, .progress-lg, .progress-xl, or a custom --boodoo-progress-height variable.

50%

<div class="progress progress-sm mb-2" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar w-50"></div>
</div>
<div class="progress mb-2" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar w-50"></div>
</div>
<div class="progress progress-lg" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar w-50"><span>50%</span></div>
</div>

Colors

<div class="progress" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-success w-40"></div>
</div>
<div class="progress" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-warning w-60"></div>
</div>
<div class="progress" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-danger w-75"></div>
</div>
<div class="progress" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-info w-90"></div>
</div>

Striped

<div class="progress" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar progress-bar-striped w-25"></div>
</div>

Animated

<div class="progress" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar progress-bar-striped progress-bar-animated w-25"></div>
</div>

Stacked

<div class="progress-stacked" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar progress-bar-primary w-35"></div>
  <div class="progress-bar progress-bar-success w-25"></div>
  <div class="progress-bar progress-bar-warning w-15"></div>
</div>

Set width dynamically

// Using utility classes
const bar = document.querySelector('.progress-bar');
bar.classList.add('w-75');
bar.setAttribute('aria-valuenow', '75');