Progress

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

Component Source

View the source code for the progress component.

src/lib/components/ui/progress/progress.svelte

npx nnuikit add progress

import Progress from "$lib/components/ui/progress/progress.svelte";

<Progress value={65} max={100} />

Explore the progress component by adjusting the value, toggling animation, and switching between variants.

50% complete (default variant)

<Progress value={50} max={100} />

Value

Available color variants for different contextual needs.

Default

<Progress value={65} variant="default" />

Neutral

<Progress value={65} variant="neutral" />

Red

<Progress value={65} variant="red" />

Success

<Progress value={65} variant="success" />

Blue

<Progress value={65} variant="blue" />

Yellow

<Progress value={65} variant="yellow" />

ARIA: role='progressbar' with aria-valuenow, aria-valuemin, aria-valuemax

Label: aria-label describes the progress purpose

Visual: color variants indicate status (brand, success, destructive)

Prop	Type	Default	Description
`value`	`number`	-	The current progress value.
`max`	`number`	100	The maximum value for the progress bar.
`variant`	`"default" \| "neutral" \| "red" \| "success" \| "blue" \| "yellow"`	"default"	The color variant of the progress bar.
`class`	`string`	-	Custom CSS classes for the progress bar container.