progress-bar
!npm
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.
``jsx
import { ProgressBar } from "@asphalt-react/progress-bar"
`
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:
`jsx`
This will render a progress bar with "info" intent.
1. ProgressBar has an implicit role of progressbar.
2. The value of the ProgressBar determines the aria-valuenow` attribute.
3. 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".
[comment]: # "ProgressBar Props"
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 |
Applies width to fill the container and removes the default min-width.
| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |