Progress

A bar showing task progress.

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

  let value = $state(15)

  $effect(() => {
    const interval = setInterval(() => {
      value = Math.min(100, Math.round(value + Math.random() * 20))
    }, 1000)
    return () => clearInterval(interval)
  })
</script>

<Progress.Root class="grid w-60 max-w-full grid-cols-2 gap-y-2" {value}>
  <Progress.Label class="text-sm font-normal text-gray-900">Uploading</Progress.Label>
  <Progress.Value class="text-right text-sm text-gray-900 tabular-nums" />
  <Progress.Track
    class="col-span-full h-1 overflow-hidden rounded-sm bg-gray-50 inset-ring inset-ring-gray-200"
  >
    <Progress.Indicator class="block bg-gray-500 transition-[width] duration-500" />
  </Progress.Track>
</Progress.Root>

Anatomy

<script>
  import { Progress } from '@shardsui/svelte/progress'
</script>

<Progress.Root>
  <Progress.Label />
  <Progress.Track>
    <Progress.Indicator />
  </Progress.Track>
  <Progress.Value />
</Progress.Root>

API reference

Root

Groups all parts of the progress bar and reports the task's status to screen readers. Renders a <div> element with role="progressbar".

role="progressbar" requires an accessible name: render a Progress.Label inside Root, or pass aria-label to Root.

Track

Contains the progress bar indicator and represents the whole task. Renders a <div> element.

Indicator

Visualizes how much of the task is done. Its width is set inline, from the value's percentage position between min and max; in the indeterminate status no width is set. Renders a <div> element.

Value

A text element displaying the current value. Hidden from screen readers, which read the value from Root. Renders a <span> element.

Label

An accessible label for the progress bar. Renders a <span> element.

Additional types

ProgressStatus

The status carried by the object handed to the children snippet of Root, Track, Indicator and Label.

type ProgressStatus = 'indeterminate' | 'progressing' | 'complete'