Sivir UI
79

Progress

The bar fills to value out of max. Pass indeterminate when you can't measure progress; the bar then loops and ignores value.

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

<Progress value={65} class="w-full max-w-md" />

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add progress

Usage

value defaults to 0 and max to 100. Values outside that range are clamped. Progress renders no label, so place one next to it.

import { Progress } from '@sivir-ui/svelte/components/progress';

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

Examples

Determinate

report-2024.pdf

2.1 MB of 4.8 MB

<script lang="ts">
    import Download from '@lucide/svelte/icons/download';
    import { Progress } from '@sivir-ui/svelte/components/progress';
</script>

<div class="flex w-full max-w-md flex-col gap-3">
    <div class="flex items-center gap-3">
        <Download size={16} class="shrink-0 text-foreground-muted" />
        <div class="flex min-w-0 flex-1 flex-col">
            <p class="m-0 truncate text-sm">report-2024.pdf</p>
            <p class="m-0 text-xs text-foreground-muted">2.1 MB of 4.8 MB</p>
        </div>
    </div>
    <Progress value={43} />
</div>

Indeterminate

Querying data warehouse…

<script lang="ts">
    import Loader from '@lucide/svelte/icons/loader';
    import { Progress } from '@sivir-ui/svelte/components/progress';
</script>

<div class="flex w-full max-w-md flex-col gap-3">
    <div class="flex items-center gap-2">
        <Loader size={16} class="animate-spin text-foreground-muted" />
        <p class="m-0 text-sm">Querying data warehouse…</p>
    </div>
    <Progress indeterminate />
</div>

With label

Deploying to production

58%
<script lang="ts">
    import Zap from '@lucide/svelte/icons/zap';
    import { Progress } from '@sivir-ui/svelte/components/progress';
</script>

<div class="flex w-full max-w-md flex-col gap-3">
    <div class="flex items-center gap-2">
        <Zap size={16} class="shrink-0 text-yellow-600 dark:text-yellow-500" />
        <p class="m-0 flex-1 text-sm">Deploying to production</p>
        <span class="text-sm text-foreground-muted">58%</span>
    </div>
    <Progress value={58} />
</div>

Anatomy

Progress - Fills to value out of max, or loops.