progress

Accessible progress bar — determinate or indeterminate.

An accessible progress bar (WAI-ARIA progressbar), determinate or indeterminate.

import { Progress } from '@fluixi-ui/progress';

<Progress value={40} />          {/* 40% */}
<Progress value={7} max={10} />
<Progress />                     {/* indeterminate */}

• value (number | null) and max (default 100); omit value for indeterminate.
• Exposes aria-valuenow/min/max/valuetext, data-state (loading | complete | indeterminate) and a --flx-ui-progress percentage variable for styling the fill.

Circular progress

CircularProgress is a radial variant that shares the same ARIA and state model; the arc is drawn with stroke-dashoffset. Any children render centred inside the ring.

import { CircularProgress } from '@fluixi-ui/progress';

<CircularProgress value={70} />
<CircularProgress value={progress()} size={64} thickness={6} />
<CircularProgress /> {/* indeterminate */}

• size (default 40) and thickness (default 4) set the ring geometry and are read once at mount (SVG presentation attributes aren't reactive); value stays fully reactive.

Part of the Fluixi UI component library. Made with ☕ by the Fluixi team.