ProgressBar shows the progress of an activity to the user in a linear fashion. Use this component to display a determinate state of the activity with a value within 0 & 100. It can show the percentage of completion, which is hidden by default.
The ProgressBar has 3 sizes and multiple intents. It adapts to various screens to ensure responsiveness.
import { ProgressBar } from "@asphalt-react/progress-bar"
<ProgressBar value={25} />
ProgressBar supports 6 intents: info (default), success, warning, danger, neutral, brand
If a ProgressBar receives multiple intents, it fallbacks to the "info" intent. For example:
<ProgressBar value={20} danger success>
This will render a progress bar with "info" intent.
- ProgressBar has an implicit role of progressbar.
- The value of the ProgressBar determines the
aria-valuenow
attribute. - ProgressBar accepts all the aria-* attributes.
ProgressBar stretches to fit its container, but has a minimum width set to "288px". It adapts in smaller screens (below 600px) and sets the minimum width to "144px".
Controls size of ProgressBar. Possible values are "s", "m", "l" for small, medium & large respectively.
type | required | default |
---|---|---|
enum | false | "m" |
Percentage value of the progress. Accepts a number between 0 & 100, including the ends.
type | required | default |
---|---|---|
number | false | 0 |
Determines whether to show progress percentage value or not.
type | required | default |
---|---|---|
bool | false | false |
Applies info intent.
type | required | default |
---|---|---|
bool | false | false |
Applies success intent.
type | required | default |
---|---|---|
bool | false | false |
Applies danger intent.
type | required | default |
---|---|---|
bool | false | false |
Applies danger intent.
type | required | default |
---|---|---|
bool | false | false |
Applies neutral intent.
type | required | default |
---|---|---|
bool | false | false |
Applies brand intent.
type | required | default |
---|---|---|
bool | false | false |