Note
This documentation describes the ProgressBar Vue component for native UI views for Xml templates see progress-bar.
ProgressBar
A horizontal progress indicator. Wraps PrimeVue ProgressBar with determinate and indeterminate modes.
Import
import { ProgressBar } from '@neos/design-system'
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value |
number \| undefined |
undefined |
Progress percentage (0–100). Used in determinate mode |
showValue |
boolean |
true |
Show the percentage value label inside the bar |
mode |
'determinate' \| 'indeterminate' |
'determinate' |
'indeterminate' animates continuously without a specific value |
Usage Examples
Determinate progress
<ProgressBar :value="uploadProgress" />
Hidden label
<ProgressBar :value="50" :show-value="false" />
Indeterminate (infinite animation)
<ProgressBar mode="indeterminate" />
In a file upload area
<VerticalLayout space="small">
<Text>Uploading {{ fileName }}…</Text>
<ProgressBar :value="uploadPercent" :show-value="true" />
</VerticalLayout>