Conic Gradients

Svelte Component

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

@skeletonlabs/skeleton
Source Code
View Page Source

Examples

Heat Map

Loading

Getting Started

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.

typescript 
import type { ConicStop } from '@skeletonlabs/skeleton';
typescript 
const conicStops: ConicStop[] = [
	{ color: 'red', start: 0, end: 50 }, // 0-50% is red
	{ color: 'green', start: 50, end: 100 } // 50-100% is green
];
html 
<ConicGradient stops={conicStops}>(caption)</ConicGradient>

Legend

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

html 
<ConicGradient ... legend />

Color Stops

Via Theme Colors

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 }
];

Via Tailwind Colors

To utilize default Tailwind colors, supply an array with the format [name: string, shade: number].

typescript 
const conicStops: ConicStop[] = [
	{ label: 'Orange', color: ['orange', 500], start: 0, end: 10 },
	{ label: 'Yellow', color: ['yellow', 500], start: 10, end: 35 },
	{ label: 'Red', color: ['red', 500], start: 35, end: 100 }
];

Via Custom Colors

You can provide standard CSS color values as a string, including: color names, hex, rgba, HSL, or similar.

typescript 
const conicStops: ConicStop[] = [
	{ label: 'Name', color: 'orange', start: 0, end: 10 },
	{ label: 'HSL', color: 'hsl(60deg 100% 50%)', start: 10, end: 35 },
	{ label: 'Hex', color: '#bada55', start: 35, end: 100 }
];

Smooth Gradients

Provide gaps between when a color stop ends and when the next begins. The gradient will blend automatically.

typescript 
const conicStops: ConicStop[] = [
	{ color: 'transparent', start: 0, end: 25 },
	{ color: 'grey', start: 75, end: 100 }
];
html 
<ConicGradient stops={conicStops} />

Animate

Add the spin property to implement a spinning animation automatically. This pairs well with smooth gradients.

html 
<ConicGradient ... spin />

Rotate Axis

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

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