Snake Loader

Component 78

About

A loading indicator that plays a game of snake on a dot grid — the snake hunts apples, grows, and starts over.

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

Code

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

Usage.tsx

"use client";

import { SnakeLoader } from "@/components/ui/snake-loader";

export const settings = {
    snakeColor: "#0033FF",
    appleColor: "#A3E635",
    width: 7,
    speed: 80,
    label: "Generating your project...",
};

type DemoProps = {
    snakeColor?: string;
    appleColor?: string;
    width?: number;
    speed?: number;
    label?: string;
};

export default function SnakeLoaderDemo(props: DemoProps) {
    const { snakeColor, appleColor, width, speed, label } = { ...settings, ...props };

    return (
        <div className="flex w-full items-center justify-center p-10">
            <div className="flex items-center gap-2.5 rounded-lg border bg-card px-4 py-3 text-card-foreground">
                <SnakeLoader
                    width={width}
                    speed={speed}
                    snakeColor={snakeColor}
                    appleColor={appleColor}
                    className="gap-px"
                    dotClassName="size-[3px] rounded-[0.5px]"
                />
                <span className="text-sm font-medium">{label}</span>
            </div>
        </div>
    );
}