Svelte Component

Conic Gradients

Create conic gradient data visualizations for pie charts, loading spinners, and more.

import { ConicGradient } from '@skeletonlabs/skeleton';
import type { ConicStop } from '@skeletonlabs/skeleton';
Source Page Source


Provide one or more color stops that start with values that range from 0% to 100%. A stop of 0% starts at the top middle, then additional values are added in a clock-wise direction.

Provide a theme color CSS custom property var(--color-primary-500) wrapped in rgb().

const conicStops: ConicStop[] = [
	{ label: 'Primary', color: 'rgb(var(--color-primary-500))', start: 0, end: 33 },
	{ label: 'Secondary', color: 'rgb(var(--color-secondary-500))', start: 33, end: 66 },
	{ label: 'Tertiary', color: 'rgb(var(--color-tertiary-500))', start: 66, end: 100 }

This data can be reactive, but be sure to adhere to standard Svelte requirements when updating arrays.


By enabling the legend property, a small table of values will appear below the conic gradient.

Heat Map

Animated Spinner

Add the spin property to implement a spinning animation automatically. Try pairing with a smooth gradient by providing gaps between when a color stop ends and when the next begins. This will automatically blend.


Rotate Axis

Use the Tailwind rotate utility classes with the regionCone property to change the starting axis position.

<ConicGradient ... regionCone="rotate-90" />