How far through something somebody is.
Import it from rei-kit:
import { ProgressBar } from 'rei-kit'
Open ProgressBar 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 { ProgressBar } from 'rei-kit'
</script>
<template>
<ProgressBar :value="18" :max="28" label="Course progress" />
</template>
| Prop | Type | Required or default | What it is for |
|---|---|---|---|
value | number | yes | |
max | number | 100 | |
size | 'sm' | 'md' | 'lg' | 'md' | How thick the track is. `sm` for a bar under a step counter, where it is a hint rather than the subject; `lg` where the progress is the point. It shipped at one thickness and the two bars anybody wanted were `h-1`. |
label | string | For screen readers. Without it this is a rectangle that means nothing. |
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.