A circular progress indicator — determinate or indeterminate, with an optional centre label, sizes and semantic colours.
<nana-progress-ring value="60"></nana-progress-ring>
npm install @nana-tec/ui-components
import "@nana-tec/ui-components/progress-ring";
<nana-progress-ring value="60"></nana-progress-ring>
<nana-progress-ring value="72" show-value></nana-progress-ring>
<nana-progress-ring value="45" color="success" show-value></nana-progress-ring>
<nana-progress-ring indeterminate></nana-progress-ring>
Properties
| Property | Attribute | Type | Default | Description |
|---|
color | — | ProgressColor | 'primary' | Semantic colour |
indeterminate | — | boolean | false | Unknown duration — animates continuously |
label | — | string | undefined | — | Accessible label |
showValue | show-value | boolean | false | Show the percentage in the centre |
size | — | ProgressSize | 'md' | Ring size |
value | — | number | 0 | Progress value, 0–100 |
Slots
| Slot | Description |
|---|
(default) | Centre label content (overrides `show-value`) |
CSS parts
| Part | Description |
|---|
::part(ring) | The SVG wrapper |
::part(indicator) | The progress arc |
CSS custom properties
| Property | Description |
|---|
--nana-progress-color | Arc colour (overrides the `color` attribute) |
| Slot | Description |
|---|
(default) | Centre label content (overrides show-value) |
| Variable | Default | Description |
|---|
--nana-progress-color | — | Arc colour (overrides the color attribute) |
| Part | Description |
|---|
ring | The SVG wrapper |
indicator | The progress arc |
Explore Progress Ring interactively Every state, prop, and edge case — with live controls — in Storybook.
View in Storybook
