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';Heat Map
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.
const conicStops: ConicStop[] = [
{ color: 'red', start: 0, end: 50 }, // 0-50% is red
{ color: 'green', start: 50, end: 100 } // 50-100% is green
];<ConicGradient stops={conicStops}>(caption)</ConicGradient>Legend
By enabling the legend property, a small table of values will appear below the conic gradient.
<ConicGradient ... legend />Color Stops
Via Theme Colors
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 }
];Via Tailwind Colors
To utilize default Tailwind colors, supply an array with the format [name: string, shade: number].
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.
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.
const conicStops: ConicStop[] = [
{ color: 'transparent', start: 0, end: 25 },
{ color: 'grey', start: 75, end: 100 }
];<ConicGradient stops={conicStops} />Animate
Add the spin property to implement a spinning animation automatically. This pairs well with smooth gradients.
<ConicGradient ... spin />Rotate Axis
Use the Tailwind rotate utility clases with the
regionCone property to change the starting axis position.
<ConicGradient ... regionCone="rotate-90" />