import ProgressBar from 'primevue/progressbar';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
ProgressBar has two modes; "determinate" (default) and "indeterminate". In determinate mode, a value between 0 and 100 is required to display the progress.
<ProgressBar :value="value" />
data() {
return {
value: 0
}
}
Indeterminate is simplly enabled using mode property.
<ProgressBar mode="indeterminate"/>
A custom label can be placed inside the progress bar via the default slot.
<ProgressBar :value="value">
Percent Complete: {{value}}%
</ProgressBar>
Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.
| Name | Type | Default | Description |
|---|---|---|---|
| value | number | null | Current value of the progress. |
| mode | string | determinate | Defines the mode of the progress, valid values are "determinate" and "indeterminate". |
| showValue | boolean | true | Whether to display the progress bar value. |
Following is the list of structural style classes, for theming classes visit
| Name | Element |
|---|---|
| p-progressbar | Container element. |
| p-progressbar-determinate | Container element of a determinate progressbar. |
| p-progressbar-indeterminate | Container element of an indeterminate progressbar. |
| p-progressbar-value | Element whose width changes according to value. |
| p-progressbar-label | Label element that displays the current value. |
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 /">
Not applicable.
None.