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