mielui
Status and content

Progress

A progress bar. Set indeterminate for tasks with an unknown duration.

Installation

pnpm dlx @mielui/svelte add progress

Usage

Pass value for completed work and max for the total, which defaults to 100. Use indeterminate when the amount remaining is unknown. Use aria-label or aria-labelledby to name the task.

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.

<script lang="ts">
    import { Progress } from '@mielui/svelte/components/progress';
</script>

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

Examples

Simulated upload

The bar, the percentage and the status line follow one value as a transfer runs.

Determinate

Indeterminate

With label

API reference

Progress

Displays progress toward a value.

  • value
    number

    Completed amount.

    Default 0

  • max
    number

    Amount that counts as complete.

    Default 100

  • indeterminate
    boolean

    Shows activity when the amount is not known.

    Default false