@mshafiqyajid/react-progress
Headless progress hook, styled progress bar and circular ring. Indeterminate state, 5 tones, sizes, animated stripe, value display.
Playground #
Props
TSX
import { ProgressBar } from "@mshafiqyajid/react-progress/styled";
import "@mshafiqyajid/react-progress/styles.css";
<ProgressBar
tone="primary"
/>Install #
npm install @mshafiqyajid/react-progressQuick start #
import { ProgressBar, ProgressCircle } from "@mshafiqyajid/react-progress/styled";
import "@mshafiqyajid/react-progress/styles.css";
<ProgressBar value={75} tone="primary" showValue />
<ProgressBar tone="success" animated /> {/* indeterminate */}
<ProgressCircle value={60} tone="primary" showValue />ProgressBar API #
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | — | Progress value 0–100. Omit for indeterminate |
| size | "sm" | "md" | "lg" | "md" | Height |
| tone | "neutral" | "primary" | "success" | "warning" | "danger" | "neutral" | Color |
| label | string | — | Accessible label |
| showValue | boolean | false | Show percentage text |
| animated | boolean | false | Animated stripe (indeterminate) |
| rounded | boolean | true | Rounded ends |
ProgressCircle API #
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | — | Progress value 0–100. Omit for indeterminate spin |
| size | "sm" | "md" | "lg" | number | "md" | Size (or custom px) |
| tone | "neutral" | "primary" | "success" | "warning" | "danger" | "neutral" | Color |
| showValue | boolean | false | Show percentage inside ring |
| strokeWidth | number | 4 | Ring stroke thickness |