Progress reports a task the user is waiting on: an upload, an import, a multi-step setup. It has no form value and never changes on its own; update value as the work advances. Use Slider when people choose the number.
Label and value
The label attribute names the progressbar for assistive technology. The label and output slots add a visible caption and value; both are optional, and Progress never fabricates the number for you.
Bare and captioned
Default density
Compact density
Restart from the initial state
Show the copyable source
Leave out value when the amount of work is unknown. The bar switches to an ambient animation and omits the numeric value, which reduced motion stops.
Indeterminate
Default density
Compact density
Restart from the initial state
Show the copyable source
Connecting to GitHub…
Connecting to GitHub…
<tp-progress label="Connecting to GitHub" style="max-inline-size:22rem">
<span slot="label">Connecting to GitHub…</span>
</tp-progress>
Range
minimum and maximum default to 0 and 100. Count steps or bytes directly and the fill is normalized for you; value-text gives screen readers the phrasing you show on screen. A finite value is clamped to the declared range; empty, null, NaN and infinite values are indeterminate.
Steps
Default density
Compact density
Restart from the initial state
Show the copyable source
Workspace setupStep 3 of 5
Workspace setupStep 3 of 5
<tp-progress value="3" minimum="0" maximum="5" value-text="Step 3 of 5" label="Workspace setup" style="max-inline-size:22rem">
<span slot="label">Workspace setup</span>
<span slot="output">Step 3 of 5</span>
</tp-progress>
Live updates
Set value from your own task as it reports progress. Each part publishes data-progressing or data-complete, so styles can respond when the work finishes. No default live region announces rapid updates.
Import
Default density
Compact density
Restart from the initial state
Show the copyable source
Instead of writing the output text yourself, let the value part render state.formattedValue through partContracts. It formats for locale (by default the nearest lang) as a percentage, or with your own Intl.NumberFormat options in format, which then apply to the raw value rather than the fraction.
Formatted value
Default density
Compact density
Restart from the initial state
Show the copyable source
AttributePropertyTypeDefaultDescriptionaria-label———Names the progress bar when no visible label does; it takes precedence over the label slot and label.aria-labelledby———Names the progress bar from other elements on the page, such as a heading above it.valuevaluenumber | nullnullHow far the task has come, between minimum and maximum; leave it empty while the amount of work is unknown.minimumminimumnumber0The value at which the task starts.maximummaximumnumber100The value at which the task is complete, such as a step count or a byte total.minminnumber—Another name for minimum.maxmaxnumber—Another name for maximum.labellabelstring'Progress'The accessible name when neither the label slot nor aria-label supplies one.value-textvalueTextstring | undefined—The value as assistive technology reads it, such as "Step 3 of 5".
Properties
PropertyTypeDefaultDescriptionlocalestring | string[] | undefined—The locale the value is formatted for; by default the nearest lang.formatIntl.NumberFormatOptions | undefined—Number format options for the value; with them the raw value is formatted instead of a percentage.getAccessibleValueTextAccessibleProgressText | undefined—Builds the spoken value from the formatted and the raw value, when it depends on the value.stateread-onlyProgressState—The current value, range, formatting and status in one read-only snapshot, the same one every part receives.statusread-onlyProgressState['status']—Whether the task is indeterminate, progressing or complete.percentageread-onlynumber | null—The completed share from 0 to 100, or null while indeterminate.formattedValueread-onlystring—The value formatted for the locale, empty while indeterminate.
Slots
SlotDescriptionlabelA visible name for the task; it also names the progress bar.outputThe visible value, written by the application, such as "41 of 50 GB".
CSS parts
PartDescription::part(progress)The progress bar: the element assistive technology reads, around the label, the value and the track.::part(progress-indicator)The fill for the completed share, or the moving fill while indeterminate.::part(progress-label)The wrapper of the label slot.::part(progress-track)The full range of the bar.::part(progress-value-output)The wrapper of the visible value, hidden from assistive technology since the bar already reads it.
Related
Components, widgets and patterns that use this one.