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%

Height

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

50%

Colors

Striped

Animated

Stacked

Set width dynamically

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