ProgressBar

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.

Usage

import { ProgressBar } from "@asphalt-react/progress-bar"

<ProgressBar value={25} />

Intents

ProgressBar supports 6 intents: info (default), success, warning, danger, neutral, brand

Competing intents

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.

Accessibility

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.

Responsive behavior

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".

Props

size

Controls size of ProgressBar. Possible values are "s", "m", "l" for small, medium & large respectively.

| type | required | default | | ---- | -------- | ------- | | enum | false | "m" |

value

Percentage value of the progress. Accepts a number between 0 & 100, including the ends.

| type | required | default | | ------ | -------- | ------- | | number | false | 0 |

showValue

Determines whether to show progress percentage value or not.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

info

Applies info intent.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

success

Applies success intent.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

warning

Applies danger intent.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

danger

Applies danger intent.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

neutral

Applies neutral intent.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

brand

Applies brand intent.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |