Svelte Component

Conic Gradients

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

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

Demo

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().

typescript 
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.

Legend

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.

Loading

Rotate Axis

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

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