Conic Gradients
Svelte ComponentCreate conic gradient data visualizations for pie charts, loading spinners, and more.
Import
Types
Package
Source
Doc
Examples
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.
import type { ConicStop } from '@skeletonlabs/skeleton';
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" />