Progress

Progress shows how far a task has got, or that it is still working. It is a native progress element with an optional label row, two sizes, and a determinate or indeterminate state.

Public web API

One root hook, a native <progress>, a visible label, and optional value text.

<div data-bitsy-progress>
  <label data-bitsy-progress-label for="upload">Uploading report.pdf</label>
  <span data-bitsy-progress-value>64%</span>
  <progress id="upload" max="100" value="64">64%</progress>
</div>

<div data-bitsy-progress data-bitsy-size="sm">
  <label data-bitsy-progress-label for="sync">Syncing</label>
  <progress id="sync"></progress>
</div>

Leave out value for the indeterminate state.
data-bitsy-size="sm" is the only option; md is the default.
A bare <progress data-bitsy-progress aria-label="…"> fits where there is no room for a label.
The bar is not a live region. Announce only the end of the task from the page.

Sizes and states

The fill length shows the value. The indeterminate bar slides, or shows a static half fill under reduced motion.

Determinate, default size

Queued 0% 0%

Uploading report.pdf 40% 40%

Import finished 100% 100%

Small

Step 2 of 5 40% 40%

Storage sync 80%

Indeterminate

Preparing export

Syncing

Bare bar in a table cell

File	Progress
report.pdf	64%
photos.zip	12%

Foundation versus Bit

A raw <progress> looks different in every browser. data-bitsy-progress restyles the track and fill on all three engines and pairs the bar with a label and value row. Updating the value is the page's job, so the Bit ships no JavaScript. For a measurement within a range, such as storage used, wait for the Meter Bit.