Progress

Display

Progress bar with 5 color variants, 4 sizes, animated stripe pattern, indeterminate mode, and 3 value-change animations.

Import

ts 
import Progress from '$lib/components/Progress.svelte';

Usage

svelte 
<Progress value={68} />

Sizes

Four track heights: xs, sm, md (default), lg.

xs
sm
md
lg

Variants

Five semantic color variants: accent, success, warning, danger, info.

Accent 68%
Success 82%
Warning 55%
Danger 34%
Info 76%
svelte 
<Progress value={68} variant="accent"  label="Accent"  showValue />
<Progress value={82} variant="success" label="Success" showValue />
<Progress value={55} variant="warning" label="Warning" showValue />
<Progress value={34} variant="danger"  label="Danger"  showValue />
<Progress value={76} variant="info"    label="Info"    showValue />

Striped

Add striped for an animated diagonal stripe pattern.

Accent 68%
Success 82%
Warning 55%
Danger 34%
Info 76%
svelte 
<Progress value={72} striped />
<Progress value={72} striped variant="success" />

Indeterminate

Use indeterminate when the total progress is unknown. Ignores value.

Accent
Success
Warning
Danger
Info
svelte 
<Progress indeterminate />
<Progress indeterminate variant="info" size="sm" />

Animations

Drag the slider to see how each animation value behaves when the progress changes.

View rate 68%
Completed tasks 68%
Storage used 32%
Value 68
svelte 
<Progress value={sliderVal} animation="smooth" label="Smooth" showValue />
<Progress value={sliderVal} animation="spring" label="Spring" showValue />
<Progress value={sliderVal} animation="bounce" label="Bounce" showValue />
<Progress value={sliderVal} animation="none"   label="None"   showValue />

Use Cases

Real-world examples of Progress in common UI patterns.

File Upload

video_final.mp4 248 MB
84%
thumbnail.png 1.2 MB
100%
subtitle.srt 42 KB
38%

Profile Stats

Follower goal 73%
Like rate 91%
Comment engagement 44%
Storage used 58%

Skill Bars

Video Editing 92%
Motion Design 78%
Color Grading 85%
Sound Design 61%

Loading States

Processing video...
Uploading to server...
AI analyzing...

API Reference

PropTypeDefaultDescription
value number0Current progress value.
max number100Maximum value. The fill percentage is value/max * 100.
size 'xs' | 'sm' | 'md' | 'lg''md'Track height.
variant 'accent' | 'success' | 'warning' | 'danger' | 'info''accent'Color theme of the fill.
animation 'smooth' | 'spring' | 'bounce' | 'none''smooth'Easing applied when the value changes.
striped booleanfalseAdds an animated diagonal stripe pattern to the fill.
indeterminate booleanfalseShows an infinite looping animation. Ignores value.
label stringundefinedAccessible label rendered above the bar.
showValue booleanfalseShow the numeric percentage next to the label.
class stringundefinedExtra CSS classes for the root element.