<script>
  import { ProgressBar } from "carbon-components-svelte";
  import Preview from "../../components/Preview.svelte";
</script>

## Default

Without a specified `value` prop, the progress bar is indeterminate.

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

## Small size

Specify `size="sm"` to use the small variant.

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

## Percentage

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 file" helperText="Upload complete" />

## Error status

Specify `status="error"` for the progress bar.

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

## Custom max value

The default `max` value is `100`.

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

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

## Inline variant

The inline variant visually hides the `helperText`.

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

## Indented variant

<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 file" helperText="Upload complete" />

## UX example

This example shows how to animate the progress bar from 0 to 100% with start and end states.

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