Feedback

Progress

Display the completion status of a task or process. Progress bars support determinate values, indeterminate animations, step labels, status text, and multiple color schemes.

Playground

Experiment with different props in real-time.

Value

Color

Size

Animation

Status

Basic Usage

Import and use the Progress component with a value prop to show determinate progress.

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

<Progress value={60} />

Sizes

7 sizes from 2xs to 2xl to fit different layout needs.

<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

8 semantic color schemes to convey different meanings.

<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

Enable the status prop to display percentage text alongside the bar.

60%

35%

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

Indeterminate

Pass value={null} to render an indeterminate animation when the progress amount is unknown.

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

Animations

Choose from 4 animation styles for the indeterminate state using the animation prop.

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 a string array to max to display step labels beneath the progress bar.

Step 1Step 2Step 3

<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

Use the ui prop to override classes on specific internal elements of the Progress.

Slot	Description
`root`	Outermost wrapper element — controls overall layout and spacing
`base`	Track container — controls background, border-radius, and overflow
`indicator`	Fill bar element — controls color, width/height, and transitions
`status`	Status text element — controls font size, color, and position
`steps`	Step labels container — controls step label layout and styling

Snippets

Use Svelte 5 snippets to customize specific parts of the Progress.

Snippet	Type	Description
`statusSlot`	`Snippet<[{ percent: number }]>`	Custom status content — receives the current percentage value

Props

Prop	Type	Default	Description
`value`	`number \| null`	`-`	Progress value; null renders an indeterminate animation
`max`	`number \| string[]`	`100`	Maximum value or array of step labels
`status`	`boolean`	`false`	Show status text displaying current/max progress
`color`	`Color`	`'primary'`	Color scheme of the progress bar
`size`	`'2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'`	`'md'`	Height of the progress bar
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Orientation of the progress bar
`inverted`	`boolean`	`false`	Invert the fill direction
`animation`	`'carousel' \| 'carousel-inverse' \| 'swing' \| 'elastic'`	`'carousel'`	Animation style for indeterminate state
`class`	`string`	`-`	Additional CSS classes
`ui`	`Record<Slot, Class>`	`-`	Override classes on internal UI slots

Alert Toast