Helix Loader

Component 96

About

An animated DNA double-helix loading spinner with dots traveling along interleaved sinusoidal paths, supporting dna, ribbon, and minimal variants.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Helix Loader to your project and fits it to your theme.

Code

How Helix Loader is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { LoaderHelix } from "@/components/ui/loader-helix";

export default function LoaderHelixDemo() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center gap-16 bg-background text-foreground">
      <div className="flex flex-col items-center gap-4">
        <LoaderHelix variant="dna" dots={12} />
        <span className="text-xs text-muted-foreground">dna</span>
      </div>
      <div className="flex flex-col items-center gap-4">
        <LoaderHelix variant="ribbon" dots={12} />
        <span className="text-xs text-muted-foreground">ribbon</span>
      </div>
      <div className="flex flex-col items-center gap-4">
        <LoaderHelix variant="minimal" dots={12} />
        <span className="text-xs text-muted-foreground">minimal</span>
      </div>
    </div>
  );
}