Progress Bar · astryx-svelte

Usage

A horizontal bar showing the completion progress of a task. Use it for operations where the duration is known, or as an animated indicator when progress can't be calculated. Supports semantic color variants, value labels, and custom formatting.

ts
 
import { ProgressBar } from '@astryx-svelte/core';

Best practices

Guidance	Practices
Do	Use a determinate bar when the total amount of work is known, and indeterminate when it's not.
Do	Choose a color variant that matches the context: accent for general progress, success for completion, warning or error for alerts.
Do	Always provide a label, even if hidden; screen readers need it to announce what's loading.
Don't	Place icons or labels inside the bar; compose them alongside it using layout components.
Don't	Use a progress bar for instant actions; it's meant for operations that take noticeable time.
Don't	Use multiple progress bars stacked together for the same operation; use one bar with a value label instead.

Examples

Common configurations, variations, and states.

ProgressBar — Custom Format

Progress bar with a custom value label showing disk usage in GB.

ProgressBar — Indeterminate

Indeterminate progress bar for operations with unknown duration.

ProgressBar — Semantic Variants

All semantic color variants stacked vertically.

ProgressBar — With Value Label

Progress bar with its current percentage displayed.