laif-ds
Version:
Design System di Laif con componenti React basati su principi di Atomic Design
54 lines (40 loc) • 2.36 kB
Markdown
# CircularProgress
## Overview
SVG-based circular progress with customizable size, stroke widths, end-cap shape, and optional centered label.
---
## Props
| Prop | Type | Default | Description |
| --------------------- | ----------------------------- | ------------ | ------------------------------------------------- | ---------------------- |
| `value` | `number` | **required** | Percentage [0-100]. |
| `renderLabel` | `(progress: number) => number | string` | `undefined` | Custom label renderer. |
| `size` | `number` | `100` | Diameter in px. |
| `strokeWidth` | `number` | `undefined` | Overrides both circle and progress stroke widths. |
| `circleStrokeWidth` | `number` | `10` | Base circle stroke width. |
| `progressStrokeWidth` | `number` | `10` | Progress stroke width. |
| `shape` | `"square" | "round"` | `"round"` | Stroke line cap. |
| `className` | `string` | `undefined` | Base circle classes. |
| `progressClassName` | `string` | `undefined` | Progress circle classes. |
| `labelClassName` | `string` | `undefined` | Center label classes. |
| `showLabel` | `boolean` | `false` | Show `{value}` (or `renderLabel(value)`) inside. |
---
## Examples
```tsx
import { CircularProgress } from "laif-ds";
export function Basic() {
return <CircularProgress value={65} size={100} showLabel />;
}
export function CustomLabel() {
return (
<CircularProgress
value={42}
size={120}
showLabel
renderLabel={(v) => `${v}%`}
/>
);
}
```
---
## Notes
- **Theming**: Base circle uses `stroke-d-primary/25`; progress uses `stroke-d-primary`.
- **Performance**: Pure SVG; safe to animate via CSS if needed.