AstroAnimate Docs — Installation, Components & API

Renders a customizable progress bar with size variants, color options, and built-in accessibility support. Uses CSS transitions for smooth updates with no JavaScript required.

Preview/Playground

Created by

Barsan

Loading...

Astro

import ProgressBar from '@astroanimate/core/ProgressBar';

<ProgressBar value={65} label="Loading..." />

Installation

bash

npm install @astroanimate/core

Usage

---
import ProgressBar from "@astroanimate/core/ProgressBar";
---

<ProgressBar value={65} label="Loading..." />

Displays a progress bar at 65% completion with an optional label.

Props

Prop	Type	Default	Description
`value`	`number`	`-`	Progress value (0–max). Required
`max`	`number`	`100`	Maximum value used to compute percentage
`label`	`string`	`-`	Label text displayed above the progress bar
`size`	`"small" \| "medium" \| "large"`	`"medium"`	Size variant controlling height and label size
`color`	`string`	`"#3b82f6"`	Bar fill color
`trackColor`	`string`	`"#e5e7eb"`	Track background color
`class`	`string`	`-`	Optional class applied to the root element

Behavior

Progress value is clamped between 0 and max to prevent invalid states
Percentage width is computed automatically from value / max
Updates to value animate smoothly using CSS transitions
Label is optional and only rendered when provided
No JavaScript is used — all updates rely on reactive rendering

Use When

Displaying file upload or download progress
Showing form completion status
Indicating loading states with percentage
Visualizing linear progress in UI workflows

Avoid When

Interactive progress control is required (use a slider instead)
Multi-segment or stacked progress visualization is needed
Precise real-time updates faster than transition duration are required

Accessibility

Uses role="progressbar" with ARIA attributes:
- aria-valuenow
- aria-valuemin
- aria-valuemax
- aria-label (if label provided)
Respects prefers-reduced-motion by disabling width transitions
Supports dark mode via prefers-color-scheme