mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-19 03:49:34 +00:00
Code Issues Projects Releases Packages Wiki Activity

ProgressBar status feature added

Browse source
This commit is contained in:
jqlio18 2022-11-20 21:54:08 -05:00
commit 43090c5f47
2 changed files with 72 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

16
docs/src/pages/components/ProgressBar.svx
View file

@ -21,6 +21,18 @@ Specify a `value` for the progress bar to be determinate.
<ProgressBar value={40} labelText="Upload status" helperText="40 MB of 100 MB" />
## Finished status
Specify `status="finished"` for the progress bar.
<ProgressBar value={100} status="finished" labelText="Upload status" helperText="100 MB of 100 MB" />
## Error status
Specify `status="error"` for the progress bar.
<ProgressBar value={40} status="error" labelText="Upload status" helperText="40 MB of 100 MB" />
## Custom max value
The default `max` value is `100`.
@ -45,6 +57,10 @@ The inline variant visually hides the `helperText`.
<ProgressBar kind="indented" value={40} labelText="Upload status" helperText="40 MB of 100 MB" />
## Indented status variant
<ProgressBar kind="indented" status="finished" value={40} labelText="Upload status" helperText="100 MB of 100 MB" />
## UX example
This example shows how to animate the progress bar from 0 to 100% with start and end states.