Overview
DNA helix loader with interleaved sinusoidal dot paths. Variants include dna (two strands + rungs), ribbon (gradient), and minimal (dots only). CSS-only.
Installation
npx shadcn@latest add @elements/loader-helixUsage
import { LoaderHelix } from "@/components/elements/loader-helix";
export function Loading() {
return <LoaderHelix variant="dna" dots={12} />;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
dots | number | 12 | Number of dots in the helix |
speed | number | 2 | Animation speed in seconds |
variant | "dna" | "ribbon" | "minimal" | "dna" | Visual variant |
className | string | - | Additional CSS classes |