Progress Linear - Skeleton

75%

<script lang="ts">
  import { Progress } from '@skeletonlabs/skeleton-svelte';

  let value = $state(75);
</script>

<Progress {value}>
  <Progress.Label>{value}%</Progress.Label>
  <Progress.Track>
    <Progress.Range />
  </Progress.Track>
</Progress>

Color

Provide background color values for the track and range to customize the colors.

<script lang="ts">
  import { Progress } from '@skeletonlabs/skeleton-svelte';
</script>

<div class="flex w-full flex-col gap-8">
  <Progress>
    <Progress.Track>
      <Progress.Range class="bg-primary-500" />
    </Progress.Track>
  </Progress>
  <Progress>
    <Progress.Track>
      <Progress.Range class="bg-secondary-500" />
    </Progress.Track>
  </Progress>
  <Progress>
    <Progress.Track>
      <Progress.Range class="bg-tertiary-500" />
    </Progress.Track>
  </Progress>
</div>

Height

<script lang="ts">
  import { Progress } from '@skeletonlabs/skeleton-svelte';
</script>

<div class="flex w-full flex-col gap-8">
  <Progress>
    <Progress.Track class="h-1">
      <Progress.Range />
    </Progress.Track>
  </Progress>
  <Progress>
    <Progress.Track class="h-4">
      <Progress.Range />
    </Progress.Track>
  </Progress>
  <Progress>
    <Progress.Track class="h-6">
      <Progress.Range />
    </Progress.Track>
  </Progress>
</div>

Orientation

For vertical orieintation, a height must be defined on the Track component. The default is h-[100px].

Indeterminate

You must explicitely specify a null value to trigger indeterminate mode.

Custom Animation

<script lang="ts">
  import { Progress } from '@skeletonlabs/skeleton-svelte';
</script>

<Progress value={null}>
  <Progress.Track>
    <Progress.Range class="animate-[custom-animation_2s_ease-in-out_infinite]" />
  </Progress.Track>
</Progress>

<style>
  @keyframes -global-custom-animation {
    from {
      scale: 0.5 1;
      transform: translateX(-200%);
    }
    25% {
      transform: translateX(50%);
    }
    50% {
      transform: translateX(-50%);
    }
    75% {
      transform: translateX(150%);
    }
    to {
      scale: 0.5 1;
      transform: translateX(200%);
    }
  }
</style>

Consider using following variants to target the orientation and state.

data-[orientation=horizontal]:my-custom-animation - target the horizontal orientation.
data-[orientation=vertical]:my-custom-animation - target the vertical orientation.
data-[state=indeterminate]:my-custom-animation - target the indeterminate state.

Native Alternative

The native progress element is available cross browser, but does not support indeterminate animations.

Direction

Label

<script lang="ts">
  import { Progress } from '@skeletonlabs/skeleton-svelte';
</script>

<Progress dir="rtl">
  <Progress.Label>Label</Progress.Label>
  <Progress.Track>
    <Progress.Range />
  </Progress.Track>
</Progress>

API Reference

RootProvider

Property	Default	Type
`value`	-	() => ProgressApi<PropTypes>
`element`	-	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Root

flex flex-col gap-2 data-[orientation=horizontal]:w-full data-[orientation=vertical]:items-center

Property	Default	Type
`ids`	-	Partial<{ root: string; track: string; label: string; circle: string; }> \| undefined The ids of the elements in the progress bar. Useful for composition.
`value`	-	number \| null \| undefined The controlled value of the progress bar.
`defaultValue`	50	number \| null \| undefined The initial value of the progress bar when rendered. Use when you don't need to control the value of the progress bar.
`min`	0	number \| undefined The minimum allowed value of the progress bar.
`max`	100	number \| undefined The maximum allowed value of the progress bar.
`translations`	-	IntlTranslations \| undefined The localized messages to use.
`onValueChange`	-	((details: ValueChangeDetails) => void) \| undefined Callback fired when the value changes.
`formatOptions`	{ style: "percent" }	NumberFormatOptions \| undefined The options to use for formatting the value.
`locale`	"en-US"	string \| undefined The locale to use for formatting the value.
`dir`	"ltr"	"ltr" \| "rtl" \| undefined The document's text/writing direction.
`getRootNode`	-	(() => ShadowRoot \| Node \| Document) \| undefined A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
`orientation`	"horizontal"	"horizontal" \| "vertical" \| undefined The orientation of the element.
`element`	-	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

RootContext

Property	Default	Type
`children`	-	Snippet<[() => ProgressApi<PropTypes>]>

Label

whitespace-nowrap

Property	Default	Type
`element`	-	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

ValueText

Property	Default	Type
`element`	-	Snippet<[HTMLAttributes<"span">]> \| undefined Render the element yourself

Track

bg-surface-200-800 rounded-base overflow-hidden data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-2 data-[orientation=vertical]:w-2 data-[orientation=vertical]:h-[100px]

Property	Default	Type
`element`	-	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Range

h-full bg-surface-950-50 rounded-base data-[orientation=horizontal]:transition-[width] data-[orientation=horizontal]:data-[state=indeterminate]:animate-progress-linear-indeterminate-horizontal data-[orientation=vertical]:transition-[height] data-[orientation=vertical]:data-[state=indeterminate]:animate-progress-linear-indeterminate-vertical

Property	Default	Type
`element`	-	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Circle

Property	Default	Type
`element`	-	Snippet<[HTMLAttributes<"svg">]> \| undefined Render the element yourself

CircleTrack

stroke-surface-200-800

Property	Default	Type
`element`	-	Snippet<[HTMLAttributes<"circle">]> \| undefined Render the element yourself

CircleRange

stroke-primary-500 transition-[stroke-dashoffset] ease-in-out data-[state=indeterminate]:animate-progress-circular-indeterminate

Property	Default	Type
`element`	-	Snippet<[HTMLAttributes<"circle">]> \| undefined Render the element yourself