Pulsing Dot Loader

A simple pulsing dot loader animation.

Pulsing Dot Loader Breakdown

🌈 Gradient Background Pulse

The loader features a vibrant gradient background that creates a dynamic, pulsing effect using Tailwind's animation utilities.

✨ Layered Dot Design

Utilizes a two-layer approach with a pulsing outer layer and a solid inner dot to create depth and visual interest.

🔄 Centered Indicator

A centered dot with a border provides clear visual feedback about an ongoing process.

🔧 Technical Highlights

Advanced Tailwind CSS animations
Custom ping animation with cubic-bezier timing
Gradient color transition
Responsive and scalable design

Code Breakdown and Features

0. Library Installation

# Using npm
npm install framer-motion react

# Using yarn
yarn add framer-motion react

• framer-motion: Provides advanced animation capabilities • react: Core React library for building the component • Ensure you're using React 16.8+ to support hooks

1. Pulsing Gradient Layer

<div className="
        absolute 
        w-12 
        h-12 
        bg-gradient-to-r 
        from-indigo-600 
        to-purple-600 
        rounded-full 
        animate-[ping_1.5s_cubic-bezier(0,0,0.2,1)_infinite]
        "></div>

• Gradient background from indigo to purple • animate-[ping] creates a pulsing scale and opacity effect • Uses cubic-bezier timing for smooth animation • Absolute positioning for layered design

2. Centered Dot Indicator

<div className="
        w-8 
        h-8 
        bg-gray-900 
        rounded-full 
        border-2 
        border-indigo-500 
        relative 
        z-10
        "></div>

• Solid dark background creates contrast • Border in indigo color adds visual interest • z-10 ensures layer is above pulsing background • Rounded shape with precise sizing

3. Animation Breakdown

/* Ping Animation Breakdown */
        @keyframes ping {
        0%, 100% {
            transform: scale(1);
            opacity: 1;
        }
        50% {
            transform: scale(1.2);
            opacity: 0.5;
        }
        }

• Creates a breathing-like pulsing effect • Scales up to 120% at midpoint • Reduces opacity for subtle fade • Infinite, smooth animation cycle

Menu