<script>
  import { ProgressBar } from "carbon-components-svelte";
  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

Create an indeterminate progress bar that continuously animates.

<ProgressBar helperText="Loading..." />

## Small size

Use the small size variant for compact layouts.

<ProgressBar size="sm" helperText="Loading..." />

## Percentage

Display progress as a percentage using the `value` prop.

<ProgressBar value={40} labelText="Upload status" helperText="40 MB of 100 MB" />

## Finished status

Show completion status with a checkmark icon.

<ProgressBar value={100} status="finished" labelText="Upload file" helperText="Upload complete" />

## Error status

Indicate errors with an error icon and red styling.

<ProgressBar value={0} status="error" labelText="Upload file" helperText="Invalid file format" />

## Custom max value

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

Visually hide the label while maintaining accessibility.

<ProgressBar hideLabel value={40} labelText="Upload status" helperText="40 MB of 100 MB" />

## Inline variant

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

Demonstrate a complete upload flow with start and end states.

<FileSource src="/framed/ProgressBar/ProgressBarUx" />