ProgressIndicator

Source code

Usage

Default (horizontal)

<script>
  import { ProgressIndicator, ProgressStep } from "carbon-components-svelte";
</script>

<ProgressIndicator>
  <ProgressStep
    label="Really long label"
    description="The progress indicator will listen for clicks on the steps"
  />
  <ProgressStep
    label="Really long label"
    description="The progress indicator will listen for clicks on the steps"
  />
  <ProgressStep
    label="Really long label"
    description="The progress indicator will listen for clicks on the steps"
  />
</ProgressIndicator>

Spaced-equally

<script>
  import { ProgressIndicator, ProgressStep } from "carbon-components-svelte";
</script>

<ProgressIndicator spaceEqually>
  <ProgressStep
    label="Really long label"
    description="The progress indicator will listen for clicks on the steps"
  />
  <ProgressStep
    label="Really long label"
    description="The progress indicator will listen for clicks on the steps"
  />
  <ProgressStep
    label="Really long label"
    description="The progress indicator will listen for clicks on the steps"
  />
</ProgressIndicator>

Vertical

<script>
  import { ProgressIndicator, ProgressStep } from "carbon-components-svelte";
</script>

<ProgressIndicator vertical>
  <ProgressStep
    label="Really long label"
    description="The progress indicator will listen for clicks on the steps"
  />
  <ProgressStep
    label="Really long label"
    description="The progress indicator will listen for clicks on the steps"
  />
  <ProgressStep
    label="Really long label"
    description="The progress indicator will listen for clicks on the steps"
  />
</ProgressIndicator>

Skeleton

<script>
  import { ProgressIndicatorSkeleton } from "carbon-components-svelte";
</script>

<ProgressIndicatorSkeleton />