Progress as a ring — for a small space, a card's corner, a goal.
Import it from rei-kit:
import { CircularProgress } from 'rei-kit'
Open CircularProgress in the live documentation, where every prop below is a control you can change, in four materials and ten palettes.
<script setup lang="ts">
import { CircularProgress } from 'rei-kit'
</script>
<template>
<div class="flex items-center gap-4">
<CircularProgress :value="72" label="Upload" show-value size="lg" />
<CircularProgress label="Loading" />
</div>
</template>
| Prop | Type | Required or default | What it is for |
|---|---|---|---|
value | number | undefined | How far. Leave it out while there is nothing to measure. |
max | number | 100 | |
label | string | yes | The accessible name, e.g. "Upload". Required: a ring says nothing aloud on its own. |
size | 'sm' | 'md' | 'lg' | 'md' | |
showValue | boolean | false | The rounded percentage inside the ring. |
tone | 'primary' | 'accent' | 'positive' | 'warning' | 'negative' | 'primary' |
rei-kit is an accessible Vue 3 and Tailwind CSS 4 component library: 106 components, themed by role rather than by colour on three independent axes — ten WCAG-checked palettes, four materials and light or dark, each switched with one attribute. Typed, tested, SSR-safe, no runtime dependencies, MIT.