@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"
/>sections — proportional coloured segments
bufferValue — ghost buffered track
Upload
Props
TSX
import { ProgressCircle } from "@mshafiqyajid/react-progress/styled";
import "@mshafiqyajid/react-progress/styles.css";
<ProgressCircle
label="Upload"
tone="primary"
/>ProgressCircleStack — concentric activity rings
- Move82%
- Exercise64%
- Stand47%
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 />Headless #
import { useProgress } from "@mshafiqyajid/react-progress";
const { progressProps, percent, isComplete, isIndeterminate } = useProgress({
value: 65,
});
return (
<div {...progressProps} className="my-bar">
<div className="my-bar__fill" style={{ width: `${percent}%` }} />
</div>
);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 |
| segments | number | — | When set, renders the bar as N discrete segments (data-filled lands on filled cells). |
| formatValue | (percent, value) => ReactNode | — | Custom value renderer used when showValue is true. |
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 |