Progress
Progress bar
Demo
API
Tag
| Name | Description |
|---|---|
<s-progress>
|
Custom Element, no content |
Attributes
| Name | Value | Required | Description |
|---|---|---|---|
valuenow |
Number |
|
Indicates what percentage of the task has been completed. |
progresslabel |
String |
|
Value that will be assigned to the |
displaytext |
String |
Text that will be displayed above the progress bar (usually the percentage or number of items that have been processed). If omitted, the percentage will be displayed. |
|
i18n |
string |
A stringified JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below. |
Properties
| Name | Value | Required | Description |
|---|---|---|---|
valueNow |
Number |
|
Indicates what percentage of the task has been completed. |
progressLabel |
String |
|
Value that will be assigned to the |
displayText |
String |
Text that will be displayed above the progress bar (usually the percentage or number of items that have been processed). If omitted, the percentage will be displayed. |
|
i18n |
object |
A JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below. |
Classes
| Name | Description |
|---|---|
medium
|
Increases progress bar size |
large
|
Increases progress bar size |
Demo
API
Tag
| Name |
|---|
<SProgress>
|
Props
| Name | Value | Required | Description |
|---|---|---|---|
valueNow |
Number |
|
Indicates what percentage of the task has been completed. |
displayText |
String |
Text that will be displayed above the progress bar (usually the percentage or number of items that have been processed). If omitted, the percentage will be displayed. |
|
i18n |
object |
A JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below. |
Classes
| Name | Description |
|---|---|
medium
|
Increases progress bar size |
large
|
Increases progress bar size |
Skylab React links
i18n Strings
| ID | Description | Default value |
|---|---|---|
"progress.complete"
|
The text announced by screen readers when progress is complete. | Progress complete |
"progress.progress"
|
The text announced by screen readers when loading is in progress. | Progress |
"progress.ariaLabel.progressBar"
|
The default aria-label of the progress bar. | Progress bar |
Guidelines
Accessibility
If the progress bar needs a description, use aria-describedby to point to the id of the description text.
Design
Design resources can be found on the Skylab design documentation site: skylab.avalara.com