Usage
Progress displays a circular, pie-chart style progress indicator. Set the completed percentage with progress, and customise the size and color to fit the context.
import "@nordhealth/components/lib/Progress"
Examples
Sizes
The size attribute scales the indicator from xs to xxl.
Colors
The color attribute accepts the named status colours.
Custom color
The color attribute also accepts any valid CSS colour value, including custom properties.
Progress values
The progress attribute sets how much of the task is complete, from 0 to 100.
Interactive
Progress updates reactively as its progress value changes over time.
RTL
Progress follows the document or container direction. Toggle the direction to see the layout mirror.
Accessibility
- Provide a
labeldescribing what's progressing. If no label is supplied, the component is hidden from assistive technology, so set one whenever the progress conveys meaningful state. - Make the label specific (for example "Upload progress: 60%") so screen reader users understand what the indicator represents.
- Don't rely on the indicator's colour alone to convey status, since colour isn't announced.
API reference
Progress
Progress component is used to display a circular pie-chart style progress indicator. You can customize the size and color of the progress indicator with the provided properties.
<nord-accordion></nord-accordion>Props
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
size | size | The size of the progress indicator. | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'm' |
color | color | The color of the progress indicator.
Can accept any valid CSS color value, including custom properties.
Takes precedence over the --n-progress-color CSS custom property. | string | undefined | — |
label | label | An accessible label for the progress indicator. If no label is supplied, the component is hidden from assistive technology. | string | undefined | — |
progress | progress | The progress percentage value. | number | 0 |
CSS Properties
CSS Custom Properties provide more fine grain control over component presentation. We advise utilizing existing properties on the component before using these.
| Property | Description | Default |
|---|---|---|
--n-progress-color | Controls the color of the progress indicator. | var(--n-color-accent) |
Design guidelinesFor designers
Usage
This section includes guidelines for designers and developers about the usage of this component in different contexts.
Do
- Use to show the completion status of a task with a circular indicator.
- Use when you can determine the percentage of the completed task at any time.
- Use the label property to provide an accessible label for the progress indicator.
- Use for compact spaces where a circular indicator is more appropriate than a linear progress bar.
Don't
- Don't use for indeterminate loading states, see Spinner instead.
- Don't use when a linear representation of progress is more appropriate, see Progress Bar instead.