Jelly Loader

A beautiful loading animation with stacked, rotating elliptical shapes that create a mesmerizing jelly-like effect. Uses a gradient color palette from light pink to deep magenta.

Component preview

Install using CLI

npx shadcn@latest add "https://www.obsidianui.dev/r/jelly-loader.json"

Install Manually

Install dependencies

npm install motion

Copy the source code

Copy into components/block/jelly-loader.tsx

Code


'use client';
 
import React from 'react';
import { motion, Transition } from 'motion/react';
 
type JellyLoaderProps = {
    numberOfCubes?: number;
    colors?: string[];
};
 
export function JellyLoader({
    numberOfCubes = 8,
    colors = ['#FFE4E1', '#FFB6C1', '#FF8A95', '#FF6B8A', '#E91E63', '#C2185B', '#AD1457', '#880E4F']
}: JellyLoaderProps) {
    const transition: Transition = {
        duration: 1.5,
        repeat: Infinity,
        repeatDelay: 0.5,
        ease: 'easeOut'
    };
 
    return (
        <div className="-translate-x-1/5 flex items-center justify-center">
            {Array.from({ length: numberOfCubes }).map((_, index) => {
                const x = index * 10;
                const y = -index * 10;
 
                return (
                    <motion.span
                        key={index}
                        className="h-[70px] w-[100px] absolute rounded-full"
                        style={{
                            x,
                            y,
                            zIndex: numberOfCubes - index,
                            backgroundColor: colors[index % colors.length],
                            opacity: 1 - index * 0.05
                        }}
                        initial={{ scale: 1 }}
                        animate={{ scale: [1, 0.75, 1], rotate: [0, 360] }}
                        transition={{
                            ...transition,
                            delay: index * 0.05
                        }}
                    />
                );
            })}
        </div>
    );
}
 
export default JellyLoader;

Props

Prop	Type	Default	Description
numberOfCubes	`number`	`8`	Number of stacked ellipses
colors	`string[]`	`[...pinkGradient]`	Array of colors for each layer

Examples

Custom Colors

Code


<JellyLoader 
  numberOfCubes={6}
  colors={['#3B82F6', '#60A5FA', '#93C5FD', '#BFDBFE', '#DBEAFE', '#EFF6FF']}
/>

Fewer Layers

Code


<JellyLoader numberOfCubes={4} />