progress

Accessible progress bar — determinate or indeterminate.

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

import { Progress } from '@fluixi/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.

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

Examples

progress