progress
Loading indicator with dither fill
Coreprogress.css
Installation
$
npx skeehn add progressPreview
25%
60%
90%
Loading...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | 0 | Current value (0-100) |
| max | number | 100 | Maximum value |
| variant | 'dither' | — | Visual variant with dither fill |
| state | 'loading' | — | State that controls animations (indeterminate) |
| label | string | — | Label text displayed to the right |
Usage
progress.tsx
1import { Progress } from '@skeehn/react';23export function UploadProgress() {4 return (5 <div className="flex flex-col gap-4">6 <Progress value={75} label="75%" />7 <Progress value={50} variant="dither" label="50%" />8 <Progress state="loading" label="Processing..." />9 </div>10 );11}