← All components Layout & primitives
Progress
Linear and circular progress, determinate or indeterminate. aria-valuenow omitted when indeterminate.
Inspired by Radix Progress, WAI-ARIA APG Progressbar, Apple HIG progress indicators.
Preview
What it looks like.
Downloading model63%
Indexing documents…
Linear + ring; determinate + indeterminate
Usage
Drop it into your app.
import { Progress, ProgressRing } from '@locara/components'
<Progress value={63} max={100} aria-label="Downloading model" />
<Progress aria-label="Indexing documents" /> {/* indeterminate */}
<ProgressRing value={63} size={32} />
<ProgressRing size={24} /> {/* indeterminate */}
Or copy the source into your repo:
locara add progress