Studio
2

Progress

Installation

pnpm dlx @mielui/svelte add progress

Usage

Passvalue for completed work andmax for the total, which defaults to 100. Useindeterminate when the amount remaining is unknown. Name the task witharia-label oraria-labelledby .

Fractional values are supported. Invalid maximums fall back to 100, and non-finite values display zero. Indicator transitions respect reduced motion. The indeterminate animation pauses when motion is disabled, the indicator leaves view, or the page is hidden.

import { Progress } from '$lib/mielui/components/progress';

<Progress value={28} aria-label="Upload progress" />
<Progress indeterminate aria-label="Waiting for a response" />

Examples

Determinate

Indeterminate

With label

API reference

Progress

Displays progress toward a value.

Prop Type Default
value number | undefined 0
max number | undefined 100
indeterminate boolean | undefined false