Usage
Progress Bar visually represents the completion of a task or process along a horizontal bar, showing how much has been done and how much is left. Set value for a determinate bar, or omit it for an indeterminate, ongoing activity.
import "@nordhealth/components/lib/ProgressBar"
Examples
Determinate
Set value to show how much of the task is complete. With no max, the value is a percentage from 0 to 100.
Indeterminate
Omit value to show an indeterminate bar, indicating ongoing activity with no estimate of how long it will take.
Custom max
Use max to express progress against a value other than 100.
Styling
Customise the bar with CSS custom properties such as --n-progress-border-radius.
Interactive
The progress bar fills reactively as its value changes over time.
RTL
Progress Bar follows the document or container direction. Toggle the direction to see the layout mirror.
Accessibility
- Give the bar a
labeldescribing what's progressing. It's visually hidden but exposed to assistive technology, and defaults to "Current progress". - An indeterminate bar (no
value) communicates that activity is ongoing without an estimate; usevaluewhenever you can report real progress. - The bar is built on a native
<progress>element, so its state is exposed to assistive technology automatically.
API reference
ProgressBar
Progress Bar is used to visually represent the completion of a task or process. It shows how much of the task has been completed and how much is still left.
<nord-accordion></nord-accordion>Props
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
value | value | Specifies how much of the task has been completed. Must be a valid floating point number between 0 and max, or between 0 and 100 if max is omitted. If there is no value, the progress bar is indeterminate; this indicates that an activity is ongoing with no indication of how long it’s expected to take. | number | undefined | — |
max | max | Describes how much work the task indicated by the progress element requires. The max attribute, if present, must have a value greater than 0 and be a valid floating point number. | number | 100 |
label | label | Accessible label for the progress indicator. Visually hidden, but shown for assistive technology. | string | 'Current progress' |
Methods
| Method name | Parameters | Description |
|---|---|---|
focus(options?: FocusOptions) => void | options: An object which controls aspects of the focusing process. | Programmatically move focus to the component. |
blur() => void | N/A | Programmatically remove focus from the component. |
click() => void | N/A | Programmatically simulates a click on the component. |
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-size | Controls the thickness of the progress bar, using our spacing tokens. | var(--n-space-s) |
--n-progress-border-radius | Controls how rounded the corners are, using border radius tokens. | var(--n-border-radius-s) |
--n-progress-color | Controls the color of the progress bar, using color tokens. | 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 an ongoing task.
- Use progress bar when you can determine the percentage of the completed task at any time.
- Always provide an accessible label when using Progress Bar.