Shows progress from current out of total, with an optional label and value readout, four colours and three heights.
Ejemplos
With label
A labelled bar showing its value out of the total.
Storage used64 / 100
<UiProgressBar :current="64" :total="100" label="Storage used" show-value class="max-w-md" />Colours and heights
Four colours (primary, green, red, amber) and three heights (xs, sm, md).
<div class="flex max-w-md flex-col gap-4">
<UiProgressBar :current="25" :total="100" color="primary" height="xs" />
<UiProgressBar :current="50" :total="100" color="green" height="sm" />
<UiProgressBar :current="75" :total="100" color="amber" height="md" />
<UiProgressBar :current="90" :total="100" color="red" height="md" />
</div>Props
| Nombre | Tipo | Por defecto | Descripción |
|---|---|---|---|
| current | number | 0 | Current value. |
| total | number | 100 | Value representing 100%. |
| label | string | '' | Label above the bar. |
| showValue | boolean | false | Show the numeric value. |
| color | string | 'primary' | Bar colour. primarygreenredamber |
| height | string | 'sm' | Bar thickness. xssmmd |