Progress

A horizontal progress bar — the determinate counterpart to Spinner. Give it a value for a known 0–100%; omit it (or set indeterminate) for a sweeping "working…" bar. Shared variant/size axes, --ui-* tokens.

Determinate

value + optional label/showValue.

Uploading 40%

<script>
  import { Progress } from '@spaethtech/svelte-ui';
  let value = $state(40);
</script>

<Progress {value} label="Uploading" showValue />

Indeterminate

No value → a 40% segment sweeps across (no JS timer).

Working…

<!-- Omit value (or set indeterminate) → sweeping animation -->
<Progress indeterminate label="Working…" />

Variants

primary

secondary

success

info

warning

danger

<Progress value={65} variant="primary" />
<Progress value={65} variant="success" />
<Progress value={65} variant="danger" />

Sizes

sm · 4px

md · 8px

lg · 12px

<!-- size="md" is the default -->
<Progress value={65} size="sm" />
<Progress value={65} />
<Progress value={65} size="lg" />