CircularProgress
Displays a circular progress indicator
SSR mode
Divergence from Blok
Reduced API compared to Blok's Chakra wrapper. Blok's CircularProgress (from Chakra) supports isIndeterminate / variant="indeterminate", size presets (xs/sm/md/lg/xl), thickness, min, and capIsRound. We currently expose only Value (0–Max), Max, StrokeWidth, and ShowLabel. Indeterminate mode and size presets are not yet implemented. Additive: ShowLabel (pre-styled percentage label in the centre) which Blok lacks.
Examples
Default (50%)
With label
75%
Zero
0%
Complete
100%
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| CircularProgress | Renders a circular SVG progress arc that tracks Value against Max. Optionally shows a centred percentage label via ShowLabel. |
CircularProgress
Renders a circular SVG progress arc that tracks Value against Max. Optionally shows a centred percentage label via ShowLabel.
| Property | Type | Required | Description |
|---|---|---|---|
| Value | int | Current progress value. Interpreted as a portion of Max. Default: 0. | |
| Max | int | Upper bound for Value. Default: 100. | |
| ShowLabel | bool | When true, renders the rounded percentage inside the circle. Default: false. | |
| StrokeWidth | int | Thickness of the SVG stroke. Default: 3. | |
| ClassName | string? | Extra CSS classes appended to the outer wrapper. |