Progress Bar Component — Astro

Accessible progress bar with variants, sizes, and indeterminate state

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
astro astro 
---
import ProgressBar from '../../components/ProgressBar.astro';
---

<ProgressBar value={60} max={100} />

With Label

Use showLabel to display the percentage next to the bar.

Live Example
astro astro 
<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
astro astro 
<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)
astro astro 
<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

Svelte & Vanilla: Svelte ¡ Vanilla: same HTML and BEM as in Usage above.