Components
Loading preview...
The WormLoader is a vibrant and playful loading animation that uses colorful, gradient-filled worm-like paths gliding smoothly along a curved SVG track. Its dynamic dual-worm motion—powered by SVG stroke-dasharray animations—creates a visually captivating, continuous loop that feels lively and modern. With its responsive sizing, gradient transitions, and dark/light mode adaptability, the WormLoader is perfect for splash screens, progress indicators, or fun loading states where you want to add energy and personality to your UI without compromising on performance or style.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/worm-loader"use client";
import * as React from "react";
import { WormLoader } from "@/components/ui/worm-loader";
export default function WormLoaderDemo() {
return (
<div className="flex min-h-screen items-center justify-center transition-colors">
<div className="rounded-xl bg-white dark:bg-gray-800 border p-8">
<WormLoader />
</div>
</div>
);
}