Progress

Horizontal progress bar with optional label and value text. The size prop (xs, sm, md, lg, xl) sets bar thickness and label size.

Jump to API reference

Import

Vue

import { UiProgress } from '@ziyarago/ui/vue'

Default

Documents64%

Vue

<UiProgress :value="64" label="Documents" meta="64%" />

Tones

Payment90%

Seats filled45%

Budget left20%

Vue

<UiProgress :value="90" tone="success" label="Payment" meta="90%" />

<UiProgress :value="45" tone="warning" label="Seats filled" meta="45%" />

<UiProgress :value="20" tone="danger" label="Budget left" meta="20%" />

Sizes

Documents64%

Vue

<UiProgress size="xs" :value="64" label="Documents" meta="64%" />

<UiProgress size="sm" :value="64" label="Documents" meta="64%" />

<UiProgress size="md" :value="64" label="Documents" meta="64%" />

<UiProgress size="lg" :value="64" label="Documents" meta="64%" />

<UiProgress size="xl" :value="64" label="Documents" meta="64%" />

API reference

Horizontal progress bar with optional label and meta text; use for uploads, quotas and completion.

Props

PropType and valuesDefaultDescription

valuenumber0Progress from 0 to 100; clamped to this range.

tonesuccesswarningdanger—Bar color. Omit for the brand color.

labelstring—Text above the bar on the left.

metastring—Monospace text above the bar on the right, e.g. "64%" or "3 / 5".

sizexssmmdlgxl'md'Scale of bar height and label text.

Notes

Exposes role="progressbar" with aria-valuenow; the label is not linked via aria-labelledby.