Skip to content
Work in progress - do not use in production. This component is still being built: it is not flagged Ready for Dev, so its markup, attributes, events and styles can all still change without notice, it is not covered by the accessibility gate, and it is not published to npm. It is on this site so the work can be seen and reviewed - nothing more.

ProgressBar

A progress bar component for indicating task completion.

Usage

<section is="root-progress-bar" value="60" aria-label="Loading progress"></section>
<section is="root-progress-bar" value="100" aria-label="Complete"></section>

Attributes

Attribute Type Default Description
value number (0–100) 0 Progress percentage
indeterminate boolean false Indeterminate (animated) mode
aria-label string - Accessible label

Extends

HTMLElement - use with <section is="root-progress-bar">.