Progress Ring - Skeleton

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

  let value = $state(25);
  let max = 100;
</script>

<div class="grid grid-cols-1 gap-4 justify-center">
  <ProgressRing {value} onValueChange={(e) => (value = e.value)} {max} />
  <input type="range" class="input max-w-32" bind:value {max} />
</div>

Label

Display an auto-scaled percentage label using the showLabel prop.

Icons

Provide icons or other content using the children snippet.

<script lang="ts">
  import { ProgressRing } from '@skeletonlabs/skeleton-svelte';
  import IconThermometer from '@lucide/svelte/icons/thermometer-sun';
</script>

<ProgressRing value={60} max={100} meterStroke="stroke-error-500" strokeLinecap="butt">
  <IconThermometer size={48} />
</ProgressRing>

Indeterminate

Uses indeterminate mode when value is explicitly set to null.

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

<ProgressRing value={null} size="size-14" meterStroke="stroke-tertiary-600-400" trackStroke="stroke-tertiary-50-950" />

Anatomy

<ProgressRing>

children

<div>

svg

<svg>

track

meter

label

<text>

API Reference

The Progress Ring component is an SVG-based element where all internal elements are drawn relative to the SVG’s size.

For example, the strokeWidth property can accept a pixel (px) value, but this value is scaled proportionally to the size of the SVG rather than being an absolute pixel measurement.

ProgressRing

Property	Type	Description
`label`	string	Set the text for the scalable label
`showLabel`	boolean	When enabled, show a text label with the percentage amount
`strokeWidth`	string	Set the stroke size (ex: 15px)
`strokeLinecap`	"inherit" \| "butt" \| "round" \| "square"	Defines the shape of the meter
`base`	string	Set the root base classes
`size`	string	Set the root size classes
`classes`	string	Provide arbitrary classes to the root element
`childrenBase`	string	Set the nested children base classes
`childrenClasses`	string	Provide arbitrary classes to the nested children.
`svgBase`	string	Set the SVG element base classes
`svgClasses`	string	Provide arbitrary classes to the SVG element
`trackBase`	string	Set the track base classes
`trackStroke`	string	Set the track stroke color classes
`trackClasses`	string	Provide arbitrary classes to the track element
`meterBase`	string	Set the meter base classes
`meterStroke`	string	Set the meter stroke color classes
`meterTransition`	string	Set the meter transition classes
`meterAnimate`	string	Set the meter animation classes
`meterDuration`	string	Set the meter transition duration classes
`meterClasses`	string	Provide arbitrary classes to the meter element
`labelBase`	string	Set the label classes
`labelFill`	string	Set the label fill color classes
`labelFontSize`	number	Set the label font size
`labelFontWeight`	string	Set the label font weight
`labelClasses`	string	Provide arbitrary classes to the label element
`children`	Snippet<[]>	The default child slot.
`orientation`	"horizontal" \| "vertical"	The orientation of the element. Default: "horizontal"
`ids`		The ids of the elements in the progress bar. Useful for composition.
`value`	number	The controlled value of the progress bar.
`defaultValue`	number	The initial value of the progress bar when rendered. Use when you don't need to control the value of the progress bar. Default: 50
`onValueChange`		Callback fired when the value changes.
`dir`	"ltr" \| "rtl"	The document's text/writing direction. Default: "ltr"
`getRootNode`		A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
`translations`		The localized messages to use.
`locale`	string	The locale to use for formatting the value. Default: "en-US"
`min`	number	The minimum allowed value of the progress bar. Default: 0
`max`	number	The maximum allowed value of the progress bar. Default: 100
`formatOptions`		The options to use for formatting the value. Default: { style: "percent" }