laif-ds
Version:
Design System di Laif con componenti React basati su principi di Atomic Design
50 lines (35 loc) • 2.03 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.