Loaders

Jelly Loader

#loader#jelly#physics

implementedInfinityUI component

This component is fully implemented in InfinityUI and wired into the docs and registry flow.

Installation

Use the registry command to add the component source, and install any package dependencies if needed.

Infinity Registry

Install the component source into your project with the shadcn CLI.

npx shadcn@latest add https://infinityui-pearl.vercel.app/r/jelly-loader

Package Dependencies

Install the npm packages used by this component source.

npm install framer-motion

Component Code

Copy and paste this code into your component file.

tsx

"use client";

import { motion } from "framer-motion";

interface JellyLoaderProps {
    /** Number of dots. Default: 3 */
    count?: number;
    /** Color class for the dots. Default: 'bg-indigo-400' */
    color?: string;
    /** Size in px for each dot. Default: 16 */
    size?: number;
}

export function JellyLoader({ count = 3, color = "bg-indigo-400", size = 16 }: JellyLoaderProps) {
    return (
        <div className="flex items-end gap-2" role="status" aria-label="Loading">
            {Array.from({ length: count }).map((_, i) => (
                <motion.span
                    key={i}
                    className={`rounded-full ${color}`}
                    style={{ width: size, height: size }}
                    animate={{
                        y: ["0%", "-60%", "0%"],
                        scaleY: [1, 1.3, 0.7, 1],
                        scaleX: [1, 0.8, 1.2, 1],
                    }}
                    transition={{
                        duration: 0.8,
                        ease: "easeInOut",
                        repeat: Infinity,
                        delay: i * 0.15,
                    }}
                />
            ))}
        </div>
    );
}