Component/Eclipse
Two dots trading places, one passing behind the other.
Speed1200ms
Opacity100%
import { Eclipse } from "loading-dev"; export function EclipseDemo() { return <Eclipse size={48} />;}Size
Sets the spinner’s dimensions in pixels. The default value is 20
import { Eclipse } from "loading-dev"; export function EclipseSize() { return ( <div className="flex items-center gap-6"> <Eclipse size={16} /> <Eclipse size={24} /> <Eclipse size={40} /> </div> );}Custom Classes
You can use a custom className in case you need to tweak the spinner in a specific way that the library doesn’t provide.
import { Eclipse } from "loading-dev"; export function EclipseClassName() { return <Eclipse className="opacity-40" size={32} />;}Color
The loader inherits currentColor from the parent by default. You can tint it in any way you want. It accepts any valid CSS color.
import { Eclipse } from "loading-dev"; export function EclipseColor() { return <Eclipse color="#f97316" size={32} />;}Duration
Sets the speed in ms. Higher values are slower, smaller values are faster.
import { Eclipse } from "loading-dev"; export function EclipseDuration() { return <Eclipse duration={2400} size={32} />;}State
Pauses or resumes the animation and exposes the state of the spinner.
import { Eclipse } from "loading-dev"; export function EclipsePlayState() { return <Eclipse playState="paused" size={32} />;}