Feedback & Status
Progress Ring
A circular progress indicator — determinate or indeterminate, with an optional centre label, sizes and semantic colours.
Preview
Section titled “Preview”<nana-progress-ring value="60"></nana-progress-ring>Installation
Section titled “Installation”npm install @nana-tec/ui-componentsImport
Section titled “Import”import "@nana-tec/ui-components/progress-ring";Basic usage
Section titled “Basic usage”<nana-progress-ring value="60"></nana-progress-ring>Examples
Section titled “Examples”<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 | color | ProgressColor | 'primary' | Semantic colour |
indeterminate | indeterminate | boolean | false | Unknown duration — animates continuously |
label | label | string | undefined | — | Accessible label |
showValue | show-value | boolean | false | Show the percentage in the centre |
size | size | ProgressSize | 'md' | Ring size |
value | 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) |
CSS Variables
Section titled “CSS Variables”| Variable | Description |
|---|---|
--nana-progress-color | Arc colour (overrides the color attribute) |
CSS Parts
Section titled “CSS Parts”| Part | Description |
|---|---|
ring | The SVG wrapper |
indicator | The progress arc |
Related components
Section titled “Related components”Storybook
Section titled “Storybook” Explore Progress Ring interactively Every state, prop, and edge case — with live controls — in Storybook.
View in Storybook