Components
Progress
Indicate progress with UiProgressBar and UiProgressSpinner.
UiProgressBar shows determinate or indeterminate progress; UiProgressSpinner is a simple circular loader.
Add a progress bar
<template>
<UiProgressBar :value="60" aria-label="Upload progress" text="60%" />
<UiProgressBar :value="40" size="sm" animated />
<UiProgressBar :value="0" indeterminate aria-label="Loading" />
</template>
Use a gradient
<template>
<UiProgressBar :value="75" gradient custom-class="g-cyan" />
</template>
Add a spinner
<template>
<UiProgressSpinner size="2rem" />
</template>
UiProgressBar props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | Current value (0–100 by default). |
ariaLabel | string | — | Accessible name. |
size | 'sm' | 'lg' | — | Bar height. |
animated | boolean | false | Animated stripes. |
gradient | boolean | false | Gradient fill (add g-* via customClass). |
indeterminate | boolean | false | Unknown-progress mode. |
text | string | null | — | Label inside the bar. |
ariaValuemin / ariaValuemax | number | 0 / 100 | ARIA range. |
UiProgressSpinner props
| Prop | Type | Default | Description |
|---|---|---|---|
size | string | '1.25rem' | CSS size (e.g. 2rem, 24px). |
customClass | string | string[] | Record<string, boolean> | null | — | Extra classes. |