Feedback

Progress

A progress bar with determinate and indeterminate states, step labels, status text, and multiple animation styles.

Playground

Color

Size

Status

Basic Usage

<script lang="ts">
  import { Progress } from 'sv5ui';
</script>

<Progress value={60} />

Sizes

7 track sizes.

2xs

2xl

<Progress value={60} size="2xs" />
<Progress value={60} size="xs" />
<Progress value={60} size="sm" />
<Progress value={60} size="md" />
<Progress value={60} size="lg" />
<Progress value={60} size="xl" />
<Progress value={60} size="2xl" />

Colors

primary

secondary

success

warning

error

info

<Progress value={60} color="primary" />
<Progress value={60} color="secondary" />
<Progress value={60} color="tertiary" />
<Progress value={60} color="success" />
<Progress value={60} color="warning" />
<Progress value={60} color="error" />
<Progress value={60} color="info" />
<Progress value={60} color="surface" />

With Status

Show percentage text.

60%

35%

<Progress value={60} status />
<Progress value={35} status color="success" />

Indeterminate

Pass value={null} for loading state.

<Progress value={null} />
<Progress value={null} color="secondary" />

Animations

4 indeterminate animation styles.

carousel

carousel-inverse

swing

elastic

<Progress value={null} animation="carousel" />
<Progress value={null} animation="carousel-inverse" />
<Progress value={null} animation="swing" />
<Progress value={null} animation="elastic" />

Steps

Pass string array to max for step-based display.

Account

Profile

Review

<script lang="ts">
  import { Progress } from 'sv5ui';

  let value = $state(1);
  const steps = ['Step 1', 'Step 2', 'Step 3'];
</script>

<Progress {value} max={steps} />

UI Slots

Slot	Description
`root`	`Outermost wrapper`
`base`	`Track element`
`indicator`	`Fill indicator`
`status`	`Status text`
`steps`	`Steps container`
`step`	`Individual step label`

Snippets

Snippet	Description
`statusSlot`	`Custom status content (receives percent)`
`stepSlot`	`Custom step label (receives step, index)`

Props

Prop	Type	Default	Description
`value`	`number \| null`	`-`	`Progress value (null = indeterminate)`
`max`	`number \| string[]`	`100`	`Max value or step labels array`
`status`	`boolean`	`false`	`Show status text (value/max)`
`color`	`ColorType`	`'primary'`	`Color scheme`
`size`	`'2xs'\|'xs'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'`	`'md'`	`Track size`
`orientation`	`'horizontal'\|'vertical'`	`'horizontal'`	`Direction`
`inverted`	`boolean`	`false`	`Invert fill direction`
`animation`	`'carousel'\|'carousel-inverse'\|'swing'\|'elastic'`	`'carousel'`	`Indeterminate animation`
`ref`	`string`	`-`	`Bindable reference`
`class`	`string`	`-`	`CSS classes`
`ui`	`Record<Slot, Class>`	`-`	`Override slots`

Alert Toast