import { Progress, Slider } from '@skeletonlabs/skeleton-react';
import { useState } from 'react';
export default function Default() {
const [value, setValue] = useState(50);
return (
<div className="w-full space-y-8">
{/* Progress */}
<Progress value={value} className="grid grid-cols-[auto_1fr] items-center gap-4">
<Progress.Label className="text-sm">{value}%</Progress.Label>
<Progress.Track>
<Progress.Range />
</Progress.Track>
</Progress>
{/* Control */}
<Slider className="w-32 mx-auto" value={[value]} onValueChange={(e) => setValue(e.value[0])} step={10}>
<Slider.Control>
<Slider.Track>
<Slider.Range className="bg-transparent" />
</Slider.Track>
<Slider.Thumb index={0}>
<Slider.HiddenInput />
</Slider.Thumb>
</Slider.Control>
</Slider>
</div>
);
}
<script lang="ts">
import { Progress, Slider } from '@skeletonlabs/skeleton-svelte';
let value = $state(75);
</script>
<div class="w-full space-y-8">
<!-- Progress -->
<Progress {value} class="grid grid-cols-[auto_1fr] items-center gap-4">
<Progress.Label class="text-sm">{value}%</Progress.Label>
<Progress.Track>
<Progress.Range />
</Progress.Track>
</Progress>
<!-- Controls -->
<Slider class="w-32 mx-auto" value={[value]} onValueChange={(e) => (value = e.value[0])} step={10}>
<Slider.Control>
<Slider.Track>
<Slider.Range class="bg-transparent" />
</Slider.Track>
<Slider.Thumb index={0}>
<Slider.HiddenInput />
</Slider.Thumb>
</Slider.Control>
</Slider>
</div>
Color
Change the track and range color using utility classes or custom CSS variables to match your design system.
import { Progress } from '@skeletonlabs/skeleton-react';
export default function Color() {
return (
<div className="flex w-full flex-col gap-8">
<Progress>
<Progress.Track className="bg-primary-50-950">
<Progress.Range className="bg-primary-500" />
</Progress.Track>
</Progress>
<Progress>
<Progress.Track className="bg-secondary-50-950">
<Progress.Range className="bg-secondary-500" />
</Progress.Track>
</Progress>
<Progress>
<Progress.Track className="bg-tertiary-50-950">
<Progress.Range className="bg-tertiary-500" />
</Progress.Track>
</Progress>
</div>
);
}
<script lang="ts">
import { Progress } from '@skeletonlabs/skeleton-svelte';
</script>
<div class="flex w-full flex-col gap-8">
<Progress>
<Progress.Track class="bg-primary-50-950">
<Progress.Range class="bg-primary-500" />
</Progress.Track>
</Progress>
<Progress>
<Progress.Track class="bg-secondary-50-950">
<Progress.Range class="bg-secondary-500" />
</Progress.Track>
</Progress>
<Progress>
<Progress.Track class="bg-tertiary-50-950">
<Progress.Range class="bg-tertiary-500" />
</Progress.Track>
</Progress>
</div>
Height
Create variations using different heights.
import { Progress } from '@skeletonlabs/skeleton-react';
export default function Height() {
return (
<div className="flex w-full flex-col gap-8">
<Progress>
<Progress.Track className="h-1">
<Progress.Range />
</Progress.Track>
</Progress>
<Progress>
<Progress.Track className="h-4">
<Progress.Range />
</Progress.Track>
</Progress>
<Progress>
<Progress.Track className="h-6">
<Progress.Range />
</Progress.Track>
</Progress>
</div>
);
}
<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
Using the orientation prop to control the layout.
import { Progress } from '@skeletonlabs/skeleton-react';
export default function Orientation() {
return (
<Progress orientation="vertical">
<Progress.Track>
<Progress.Range />
</Progress.Track>
</Progress>
);
}
<script lang="ts">
import { Progress } from '@skeletonlabs/skeleton-svelte';
</script>
<Progress orientation="vertical">
<Progress.Track>
<Progress.Range />
</Progress.Track>
</Progress>
Indeterminate
Set a null value to enable indeterminate mode.
import { Progress } from '@skeletonlabs/skeleton-react';
export default function Indeterminate() {
return (
<Progress value={null}>
<Progress.Track>
<Progress.Range />
</Progress.Track>
</Progress>
);
}
<script lang="ts">
import { Progress } from '@skeletonlabs/skeleton-svelte';
</script>
<Progress value={null}>
<Progress.Track>
<Progress.Range />
</Progress.Track>
</Progress>
Use CSS to enable custom animations.
import { Progress } from '@skeletonlabs/skeleton-react';
export default function CustomAnimation() {
return (
<>
<Progress value={null}>
<Progress.Track>
<Progress.Range className="animate-[custom-animation_2s_ease-in-out_infinite]" />
</Progress.Track>
</Progress>
<style>{`
@keyframes 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>
</>
);
}
<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>
Direction
Set the text direction (ltr or rtl) using the dir prop.
import { Progress } from '@skeletonlabs/skeleton-react';
export default function Dir() {
return (
<Progress dir="rtl">
<Progress.Label>Label</Progress.Label>
<Progress.Track>
<Progress.Range />
</Progress.Track>
</Progress>
);
}
<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>
Native Alternative
Skeleton also provides styles for the native Progress element.
export default function Native() {
return <progress className="progress" value="50" max="100" />;
}
<progress class="progress" value="50" max="100"></progress>
Anatomy
Here’s an overview of how the Progress (Linear) component is structured in code:
import { Progress } from '@skeletonlabs/skeleton-react';
export default function Anatomy() {
return (
<Progress>
<Progress.Label />
<Progress.Track>
<Progress.Range />
</Progress.Track>
<Progress.ValueText />
</Progress>
);
}
<script lang="ts">
import { Progress } from '@skeletonlabs/skeleton-svelte';
</script>
<Progress>
<Progress.Label />
<Progress.Track>
<Progress.Range />
</Progress.Track>
<Progress.ValueText />
</Progress>
API Reference
Root
| Prop | 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 | — | ((attributes: HTMLAttributes<"div">) => Element) | undefined Render the element yourself |
Provider
| Prop | Default | Type |
|---|
value | — | ProgressApi<PropTypes> |
element | — | ((attributes: HTMLAttributes<"div">) => Element) | undefined Render the element yourself |
Context
| Prop | Default | Type |
|---|
children | — | (progress: ProgressApi<PropTypes>) => ReactNode |
Label
| Prop | Default | Type |
|---|
element | — | ((attributes: HTMLAttributes<"div">) => Element) | undefined Render the element yourself |
ValueText
| Prop | Default | Type |
|---|
element | — | ((attributes: HTMLAttributes<"span">) => Element) | undefined Render the element yourself |
Track
| Prop | Default | Type |
|---|
element | — | ((attributes: HTMLAttributes<"div">) => Element) | undefined Render the element yourself |
Range
| Prop | Default | Type |
|---|
element | — | ((attributes: HTMLAttributes<"div">) => Element) | undefined Render the element yourself |
Circle
| Prop | Default | Type |
|---|
element | — | ((attributes: HTMLAttributes<"svg">) => Element) | undefined Render the element yourself |
CircleTrack
| Prop | Default | Type |
|---|
element | — | ((attributes: HTMLAttributes<"circle">) => Element) | undefined Render the element yourself |
CircleRange
| Prop | Default | Type |
|---|
element | — | ((attributes: HTMLAttributes<"circle">) => Element) | undefined Render the element yourself |
Root
| Prop | 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 |
Provider
| Prop | Default | Type |
|---|
value | — | () => ProgressApi<PropTypes> |
element | — | Snippet<[HTMLAttributes<"div">]> | undefined Render the element yourself |
Context
| Prop | Default | Type |
|---|
children | — | Snippet<[() => ProgressApi<PropTypes>]> |
Label
| Prop | Default | Type |
|---|
element | — | Snippet<[HTMLAttributes<"div">]> | undefined Render the element yourself |
ValueText
| Prop | Default | Type |
|---|
element | — | Snippet<[HTMLAttributes<"span">]> | undefined Render the element yourself |
Track
| Prop | Default | Type |
|---|
element | — | Snippet<[HTMLAttributes<"div">]> | undefined Render the element yourself |
Range
| Prop | Default | Type |
|---|
element | — | Snippet<[HTMLAttributes<"div">]> | undefined Render the element yourself |
Circle
| Prop | Default | Type |
|---|
element | — | Snippet<[HTMLAttributes<"svg">]> | undefined Render the element yourself |
CircleTrack
| Prop | Default | Type |
|---|
element | — | Snippet<[HTMLAttributes<"circle">]> | undefined Render the element yourself |
CircleRange
| Prop | Default | Type |
|---|
element | — | Snippet<[HTMLAttributes<"circle">]> | undefined Render the element yourself |