Progress

The native <progress> element is a full-width bar, 0.5rem tall, with rounded ends. Set value and max for a determinate bar.

<progress value="35" max="100"></progress>
<progress value="80" max="100"></progress>

Indeterminate#

Leave out value and the bar is indeterminate: a segment slides across the track. The animation only runs when prefers-reduced-motion is no-preference. With reduced motion the bar shows the plain track.

<progress></progress>

Accessibility#

Label the bar. Either wrap it with a <label> or add aria-label or aria-labelledby, otherwise a screen reader announces only a percentage with no subject. For work that has no measurable end, prefer the indeterminate bar or aria-busy over a fake value.

<label for="upload">Uploading</label>
<progress id="upload" value="60" max="100"></progress>

Customization#

The fill color follows the primary color, so a theme changes it without any extra work.

--pico-progress-color

var(--pico-primary-background)

Fill color.

--pico-progress-background-color

light-dark(#e4e6ea, #24262a)

Track color.

--pico-transition

150ms cubic-bezier(0.2, 0, 0, 1)

Transition of the fill width in WebKit and Blink.