Progress

A progress bar. Omit the value for an indeterminate, looping state.

Uploading… 28%
Indeterminate

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add progress

Usage

Import the Progress component and use it:

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

<Progress value={28} />
<Progress indeterminate />

Examples

Explore Progress in different states and configurations.

Determinate

Indeterminate

With label

Uploading… 72%

Anatomy

Progress - Displays progress toward a value.