Conic Gradients

Svelte Component

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

Examples

Heat Map

  • Orange 10%
  • Yellow 25%
  • Red 65%
  • Primary 33%
  • Accent 33%
  • Warning 34%
Loading

Usage

Provide one or more color stops that start at 0% and end at 100%. The data set below will create a half red/green conic gradient.

ts
import type { ConicStop } from '@skeletonlabs/skeleton';

const conicStops: ConicStop[] = [
	{ color: 'red', start: 0, end: 50 },
	{ color: 'green', start: 50, end: 100 }
];
html
<ConicGradient stops={conicStops} legend={false} spin={false}>(caption)</ConicGradient>

Display a Legend

A legend can be enabled by setting legend as true and provided labels for each stop.

ts
const conicStops: ConicStop[] = [
	{ label: 'Label 1', color: 'red', start: 0, end: 33 },
	{ label: 'Label 2', color: 'green', start: 33, end: 66 },
	{ label: 'Label 3', color: 'blue', start: 66, end: 100 }
];

Colors

Via Theme Colors

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

ts
const conicStops: ConicStop[] = [
	{ label: 'Primary', color: 'rgb(var(--color-primary-500))', start: 0, end: 33 },
	{ label: 'Accent', color: 'rgb(var(--color-warning-500))', start: 33, end: 66 },
	{ label: 'Warning', color: 'rgb(var(--color-accent-500))', start: 66, end: 100 }
];

Via Tailwind Colors

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

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

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

Spinner Gradient

To create a spinner, set spin to true, and created a smooth gradient transition between transparent and filled color stops. Note the numeric gap between stops.

html
<ConicGradient stops={conicStops} spin={true} width="w-8" />
ts
const conicStops: ConicStop[] = [
	{ color: 'transparent', start: 0, end: 25 },
	{ color: 'grey', start: 75, end: 100 }
];