Progress Bar Component — Astro

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.

Add this component

The command below includes <strong>Progress Bar</strong>—run it in your project directory to install this component (and the CSS if needed). No prompts.

Choose your package manager — click a tab to select, then copy the command.

npm pnpm yarn bun

bash bash Copy code

npx rizzo-css add ProgressBar

bash bash Copy code

pnpm dlx rizzo-css add ProgressBar

bash bash Copy code

npx rizzo-css add ProgressBar

bash bash Copy code

bunx rizzo-css add ProgressBar

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

---
import ProgressBar from '../components/astro/ProgressBar.astro';
---

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

<!-- Rizzo CSS. No script needed for static bar. -->
<div class="progress-bar progress-bar--md progress-bar--primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" aria-label="Progress">
  <div class="progress-bar__fill" style="width: 60%"></div>
</div>

<script>
  import { ProgressBar } from '$lib/rizzo';
</script>

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

<script setup>
import ProgressBar from '@/components/rizzo/ProgressBar.vue';
</script>

<template>
  <ProgressBar :value="60" :max="100" show-label />
</template>

import { ProgressBar } from './components/react';

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

With Label

Use showLabel to display the percentage next to the bar.

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

Variants

Sizes

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.

<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.

<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

Other frameworks: Vanilla · Svelte · Vue · React