Progress

Show code

Usage

<progress class="progress" value="60" max="100" aria-label="Upload progress"></progress>

It is the native element

<progress> already carries the role, the value and the announcement. partialkit only paints the track and the bar, so there is no aria-valuenow to keep in sync — setting value is the whole update.

With a value

A bar without a number is hard to read precisely. Put the number beside it.

Uploading 60%

Show code

Indeterminate

Leave value off and the element is indeterminate — the bar sweeps instead of filling.

Show code

The sweep stops under prefers-reduced-motion.

RTL

Set dir="rtl" on the page or on any subtree — the bar fills from the other end. See the button page for a live example.

Accessibility

• Name it. aria-label, or a <label for> pointing at it.
• A progress bar is not a spinner. Use it when you know the proportion, and a spinner when you do not.
• Do not announce every percent. The element updates its own value; wrapping it in an assertive live region turns a quiet bar into a stream of interruptions.