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.
Properties
| 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) |
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.
Integration
For integration guidelines, please see Web Components documentation .