Progress

Communicate the completion of an ongoing task.

Live example

A reviewed public example, isolated from this page.

import {
  ProgressRoot,
  ProgressIndicator,
} from "heidi-ui/progress";
import "heidi-ui/progress/base.css";

Copy this one primitive from its hosted source recipe or install the whole package from the Heidi UI overview.

indicator<div>
Fill bar; width set structurally from value/max (or full when indeterminate).
Uses native semantics
root<div>
The progressbar track; requires an accessible name via label.
ARIA role: progressbar