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 bar-class="gradient-cyan" />
</template>
The gradient-<name> class goes on the fill through barClass: primary … info, or a named palette such as cyan or violet. Without one, the fill uses the default gradient.
Add a spinner
<template>
<UiProgressSpinner size="2rem" />
</template>
UiProgressBar props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | Fill width as a percentage of the track (0–100). |
ariaLabel | string | — | Accessible name. |
size | 'sm' | 'lg' | — | Bar height. |
animated | boolean | false | Animated stripes. |
gradient | boolean | false | Gradient fill; pick the colors with a gradient-<name> class in barClass. |
indeterminate | boolean | false | Unknown-progress mode. |
text | string | null | — | Label inside the bar. |
ariaValuemin / ariaValuemax | number | 0 / 100 | ARIA range only; the fill width always reads value as a percentage. |
customClass / customStyles | class value / style | — | Classes and inline styles for the track. |
barClass / barStyles | class value / style | — | Classes and inline styles for the fill, including gradient-<name>. |
Slots: default — content inside the fill, after text.
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. |
customStyles | string | Record<string, string | number> | null | — | Inline styles for the spinner. |
CSS variables
Set these on :root or on a wrapper. The sm and lg sizes keep their own height (and lg its radius). The spinner's size comes from its size prop.
:root {
--cffy-progress-color: var(--cffy-success-a10);
--cffy-progress-height: .5rem;
}
| Variable | Default | Controls |
|---|---|---|
--cffy-progress-bg-color | --cffy-surface-container-high | Track |
--cffy-progress-color | --cffy-primary-a10 | Fill |
--cffy-progress-value | 50% | Fill width; UiProgressBar's value prop sets it. Set it on .progress for every bar inside, or on one .progress-bar |
--cffy-progress-label-color / --cffy-progress-font-size | --cffy-on-primary / --cffy-fs-4xs | Label inside the fill |
--cffy-progress-height / --cffy-progress-radius | .85rem / --cffy-radius-md | Bar size and corners |
--cffy-progress-easing / --cffy-progress-duration | --cffy-ease-emphasized / --cffy-duration-800 | Fill transition |
--cffy-progress-spinner-color | --cffy-muted-a10 | UiProgressSpinner color |
--cffy-progress-spinner-size | 1.25rem | UiProgressSpinner size; its size prop sets it |
--cffy-loading-shapes-color | --cffy-primary-a10 | Blurred shapes of the shapes loader |