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');

Circular Progress & Radial Gauges

Pure CSS circular indicators and speedometer gauges driven by conic-gradient and the --circle-value CSS variable.

66%

45%

75%

40%

<!-- Circular Doughnut Meter -->
<div class="progress-circle progress-circle-primary" style="--circle-value: 66;">
  <div class="progress-circle-body">
    <span class="progress-number">66%</span>
  </div>
</div>

<!-- Segmented Radial Notch Ring -->
<div class="progress-circle progress-segmented progress-circle-danger" style="--circle-value: 40;">
  <div class="progress-circle-body">
    <span class="progress-number">40%</span>
  </div>
</div>

Semi-Circular Speedometer & Battery Gauges

Arched 180° speedometers and capacity gauges with needle indicator points using .progress-semicircle.

37.05% Battery

82.05% Usage

73% CPU Load

<!-- Semicircular Gauge with Indicator Dot -->
<div class="progress-circle progress-semicircle progress-circle-info" style="--circle-value: 37;">
  <div class="progress-gauge-indicator"></div>
  <div class="progress-circle-body">
    <span class="progress-number">37.05%</span>
    <span class="progress-label">Battery</span>
  </div>
</div>

Inset Ring Gauges & Contrasting Dials

High-contrast dark-slate core dials with vibrant peripheral progress arcs using .progress-circle-inset.

30%

60%

90%

<div class="progress-circle progress-circle-inset progress-circle-inset-purple" style="--circle-value: 60;">
  <div class="progress-circle-body">
    <span class="progress-number">60%</span>
  </div>
</div>

Segmented Milestone Progress Bar

Multi-capsule progress tracks for onboarding workflows and multi-step forms.

<div class="progress-segmented-bar">
  <div class="progress-segment completed"></div>
  <div class="progress-segment completed"></div>
  <div class="progress-segment active"></div>
  <div class="progress-segment"></div>
</div>

Circular Task Ring with Milestone Checkpoints

Comprehensive dark-mode process dial with perimeter checkpoint nodes.

✓

…

Task 5

66% Completed

<div class="progress-circle-tasks" style="--task-ring-color: #14b8a6;">
  <div class="task-node completed" style="top: 0%; left: 50%;">✓</div>
  <div class="task-node in-progress" style="top: 75%; left: 7%;">…</div>

  <div class="task-ring-center">
    <h4 class="task-ring-title">Task 5</h4>
    <span class="task-ring-status">66% Completed</span>
  </div>
</div>