ProgressBar

ProgressBar is used with the value property.

Value is reactive so updating it dynamically changes the bar as well.

Custom content inside the ProgressBar is defined with the default slot.

For progresses with no value to track, set the mode property to indeterminate.

Screen Reader

ProgressBar components uses progressbar role along with aria-valuemin, aria-valuemax and aria-valuenow attributes. Value to describe the component can be defined using aria-labelledby and aria-label props.

<span id="label_status" />
<ProgressBar aria-labelledby="label_status" />

<ProgressBar aria-label="Status" />

Keyboard Support

Not applicable.