Progress

Import

import { Progress } from '@delightstack/components';

Basic Usage

By default, Progress renders as a circular indeterminate spinner.

View code

<Progress />

Examples

Indeterminate Spinner

Omit the value prop for an indeterminate loading animation.

View code

<!-- Default circular spinner -->
<Progress />

<!-- Linear indeterminate bar -->
<Progress circular={false} />

Determinate Progress

Provide a value (0-100) to show progress.

75%

45% Uploading...

View code

<!-- Circular progress with percentage -->
<Progress value={75} show_value />

<!-- Linear progress bar -->
<Progress circular={false} value={45} />

<!-- Linear with label and percentage -->
<Progress circular={false} value={45} show_value label="Uploading..." />

Sizes

Circular sizes

View code

<!-- Circular sizes -->
<Progress size="00" />
<Progress size="0" />
<Progress size="1" />
<Progress size="2" />
<Progress size="3" />

Linear sizes

View code

<!-- Linear sizes -->
<Progress circular={false} value={60} size="00" />
<Progress circular={false} value={60} size="1" />
<Progress circular={false} value={60} size="3" />

Striped Bar

Add an animated stripe effect to a linear progress bar.

View code

<Progress circular={false} value={60} striped />

Multi-Segment Progress

Display multiple segments with different colors in a single linear bar.

Disk Usage

Documents (40%) Photos (25%) System (10%)

View code

<Progress
  circular={false}
  segments={[
    { value: 40, color: 'var(--color-success)', label: 'Documents' },
    { value: 25, color: 'var(--color-warning)', label: 'Photos' },
    { value: 10, color: 'var(--color-error)', label: 'System' },
  ]}
/>

Overlay and Fullscreen

Use overlay to cover a parent element, or full_screen to cover the entire viewport.

Reload Table Data

Name	Status	Amount
Alice Johnson	Active	$1,200
Bob Smith	Pending	$850
Carol Davis	Active	$2,340

View code

<script>
  import { Progress } from '@delightstack/components';

  let isLoading = $state(false);
</script>

<button onclick={() => { isLoading = true; setTimeout(() => isLoading = false, 3000); }}>
  Reload Table Data
</button>

<div style="position: relative;">
  <table>...</table>
  {#if isLoading}
    <Progress overlay label="Loading data..." />
  {/if}
</div>

Color Variants

View code

<Progress value={100} success />
<Progress value={30} error />

Props

Prop	Type	Default	Description
value	number	-	Progress value (0-100). Omit for indeterminate
max	number	100	Maximum value
circular	boolean	true	Circular mode (false = linear bar)
loading	boolean	false	Force indeterminate animation regardless of value
size	'00' | '0' | '1' | '2' | '3'	'1'	Size of the indicator
color	string	-	Custom fill color (overrides currentColor)
label	string	-	Text label (below spinner or beside bar)
show_value	boolean	false	Display the current percentage
striped	boolean	false	Striped animation on fill (linear mode only)
overlay	boolean	false	Cover parent element with backdrop
full_screen	boolean	false	Cover entire viewport
success	boolean	false	Success color variant
error	boolean	false	Error color variant
segments	ProgressSegment[]	-	Multi-segment progress (linear only)
id	string	auto	Element ID
class	string	''	Additional CSS classes

Types

interface ProgressSegment {
  value: number;
  color?: string;
  label?: string;
}

Accessibility

• Uses role="progressbar" for determinate mode with aria-valuenow, aria-valuemin, and aria-valuemax
• Uses role="status" for indeterminate mode
• aria-label provides context (e.g., “Uploading file” or “75% complete”)
• Respects prefers-reduced-motion — shows a static partial arc instead of spinning
• Overlay mode uses backdrop-filter: blur(2px) for subtle background blur