Progress Bar — Svelte

Progress Bar component — Svelte.

Progress bar component

An accessible progress bar for showing completion or loading state. Supports determinate (value-based) and indeterminate (animated) modes, multiple variants and sizes, and an optional percentage label.

Props

  • value (number, optional) - Current value, 0 to max (default: 0)
  • max (number, optional) - Maximum value (default: 100)
  • variant (string, optional) - primary, success, warning, error, info (default: primary)
  • size (string, optional) - sm, md, lg (default: md)
  • showLabel (boolean, optional) - Show percentage label (default: false)
  • indeterminate (boolean, optional) - Animated loading state, ignores value (default: false)
  • label (string, optional) - Accessible label (aria-label)
  • class (string, optional) - Additional CSS classes

Basic usage

Live example
svelte svelte 
<ProgressBar value={60} max={100} />

With label

Use showLabel to display the percentage next to the bar.

Live example
svelte svelte 
<ProgressBar value={75} max={100} showLabel />

Variants

Live example

Sizes

Live example

Indeterminate

Use indeterminate for loading states when progress is unknown. The bar shows an animated fill. Provide an aria-label (e.g. "Loading") for accessibility.

Live example
svelte svelte 
<ProgressBar indeterminate label="Loading" />

Custom max

Use max and value for non-percentage progress (e.g. steps). The bar width is computed as value/max.

Live example (3 of 5 steps)
svelte svelte 
<ProgressBar value={3} max={5} showLabel />

Features

  • Semantic - role="progressbar" with aria-valuenow, aria-valuemin, aria-valuemax
  • Indeterminate - aria-valuetext="Loading" when progress is unknown
  • Variants - Primary, success, warning, error, info using theme variables
  • Sizes - sm, md, lg bar heights
  • Reduced motion - Indeterminate animation disabled when user prefers reduced motion

Astro & Vanilla: Astro · Vanilla