mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

docs(progress-bar): improve docs

Browse source
This commit is contained in:
Eric Liu 2025-05-03 10:34:46 -07:00
commit 86e8aa8b00
1 changed files with 15 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -3,66 +3,70 @@
import Preview from "../../components/Preview.svelte";
</script>
`ProgressBar` provides a visual indicator of progress for operations such as file uploads or data processing. It supports determinate and indeterminate states, various sizes, and status indicators.
## Default
Without a specified `value` prop, the progress bar is indeterminate.
Create an indeterminate progress bar that continuously animates.
<ProgressBar helperText="Loading..." />
## Small size
Specify `size="sm"` to use the small variant.
Use the small size variant for compact layouts.
<ProgressBar size="sm" helperText="Loading..." />
## Percentage
Specify a `value` for the progress bar to be determinate.
Display progress as a percentage using the `value` prop.
<ProgressBar value={40} labelText="Upload status" helperText="40 MB of 100 MB" />
## Finished status
Specify `status="finished"` for the progress bar.
Show completion status with a checkmark icon.
<ProgressBar value={100} status="finished" labelText="Upload file" helperText="Upload complete" />
## Error status
Specify `status="error"` for the progress bar.
Indicate errors with an error icon and red styling.
<ProgressBar value={0} status="error" labelText="Upload file" helperText="Invalid file format" />
## Custom max value
The default `max` value is `100`.
Set a custom maximum value for the progress bar.
<ProgressBar value={40} max={200} labelText="Upload status" helperText="40 MB of 200 MB" />
## Hidden label
It's recommended that you provide a `labelText` for accessibility.
Use `hideLabel` to visually hide the label text.
Visually hide the label while maintaining accessibility.
<ProgressBar hideLabel value={40} labelText="Upload status" helperText="40 MB of 100 MB" />
## Inline variant
The inline variant visually hides the `helperText`.
Use the inline variant to display progress without helper text.
<ProgressBar kind="inline" value={40} labelText="Upload status" helperText="40 MB of 100 MB" />
## Indented variant
Use the indented variant for a more compact layout.
<ProgressBar kind="indented" value={40} labelText="Upload status" helperText="40 MB of 100 MB" />
## Indented status variant
Combine the indented variant with status indicators.
<ProgressBar kind="indented" status="finished" value={40} labelText="Upload file" helperText="Upload complete" />
## UX example
This example shows how to animate the progress bar from 0 to 100% with start and end states.
Demonstrate a complete upload flow with start and end states.
<FileSource src="/framed/ProgressBar/ProgressBarUx" />