Progress
See how much of a task or target is complete when its progress can be measured.
<script setup lang="ts">import { UiProgress } from 'grani'</script> <template> <div class="flex w-full max-w-sm flex-col gap-4"> <UiProgress :value="3200" :max="10000" aria-label="Cushion" /> <UiProgress :value="7" :max="10" tone="success" class="h-1.5" aria-label="Done" /> <UiProgress :value="14" :max="10" tone="danger" aria-label="Budget" value-text="14 of 10, 4 over" /> </div></template>
Also called progress bar, loading bar.
Usage
<UiProgress /> With GraniResolver in the Vite config, a template needs no import: set it up once.
API
| Name · type | Default | Description |
|---|---|---|
| Behavior | ||
| valuenumber= Number.NaN | Number.NaN | The current value, in the units of max. Not read while indeterminate. |
| maxnumber= 100 | 100 | The value at which the bar is full. |
| indeterminateboolean= false | false | Work of unknown length: a band runs along the track, no value is said. |
| stepnumber | Size of one segment; turns the bar into segments, an empty one reads as one step still to go. | |
| maxSegmentsnumber= 24 | 24 | Above this many segments the bar is continuous again: a finger cannot tell them apart. |
| invertboolean= false | false | Reverses the thermometer: less is better (load, pain, cost). |
| valueTextstring | Words for the value instead of a number: "3 of 10 payments". Past max they carry the overage, the number stops at max. | |
| Look | ||
| tonebrand | neutral | success | warning | danger | info= "brand" | "brand" | Color of the fill; brand by default. |
| variantplain | thermometer= "plain" | "plain" | plain fills with tone; thermometer colors the fill by how full it is, danger through warning to success (utils/scaleRamp). |
Anything else lands on the root element: native attributes, aria-*, data-testid.
When to use another component
| When you need | Take |
|---|---|
| A wait in place | Spinner |
| Content on its way | Skeleton |
| A number | Count |
| A change | Delta |
| A mark to give | Scale input |