Pulse Ring Loader

A loader component with a pulse effect featuring beautiful, ripple-like expanding rings.

Preview

Use Cases & Features

This “Pulse Ring Loader” is particularly effective in the following scenarios:

File Uploads/Downloads: Ideal for visually representing the “heartbeat” of data transmission.
Long-running Processes (Data Analysis, AI Generation): Unlike simple rotating animations, its rich, expanding ripple effect helps reduce user frustration during wait times.
Center of Hero Sections: Its strong presence as a single element makes it function beautifully as a placeholder while content is loading.

Design & UX Highlights

Synergy of Gradients and Shadows: Using a vibrant gradient (indigo to purple to pink) for the center core, paired with a matching glow (drop shadow), gives it a modern and premium feel.
Non-linear Animation (cubic-bezier): By applying cubic-bezier to the expansion speed of the rings, it creates a natural ripple effect that starts out energetically and gradually fades away.
Multiple Ripples via Delays: Implementing time delays (animation-delay) across multiple rings creates a continuous, unbroken sense of motion.

Customization Guide

Changing Colors: You can match it to your theme color by modifying the `background: linear-gradient(…)` of `.pulse-core` and the border-color of `.pulse-ring`.
Ripple Size and Speed: Increase the value in `transform: scale(3.5)` under `@keyframes ring-pulse` to expand the ripples further, and change the `2.5s` in animation to adjust the speed.
Core Pulsation: By tweaking `transform: scale(1.2)` in `@keyframes core-pulse`, you can alter the intensity of the center’s heartbeat.

Implementation Code

<div class="pulse-loader-container">

<div class="pulse-ring"></div>

<div class="pulse-ring delay-1"></div>

<div class="pulse-ring delay-2"></div>

<div class="pulse-core"></div>

</div>



<style>
/* Container placement throughout the loader */

.pulse-loader-container {

position: relative;

width: 100px;

height: 100px;

display: flex;

align-items: center;

justify-content: center;

}



/* Core element at the center */

.pulse-core {

width: 30px;

height: 30px;

background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899);

border-radius: 50%;

position: absolute;

z-index: 10;

box-shadow: 0 0 15px rgba(168, 85, 247, 0.6);

animation: core-pulse 2s infinite ease-in-out;

}



/* Ring element that forms the ripple */

.pulse-ring {

position: absolute;

width: 30px;

height: 30px;

border-radius: 50%;

border: 2px solid rgba(168, 85, 247, 0.8);

box-sizing: border-box;

animation: ring-pulse 2.5s infinite cubic-bezier(0.215, 0.61, 0.355, 1);

opacity: 0;

}



/* Ripple animation delay (staggered timing) */

.delay-1 {

animation-delay: 0.8s;

}



.delay-2 {

animation-delay: 1.6s;

}



/* Core pulsing animation */

@keyframes core-pulse {

0%, 100% {

  transform: scale(1);

  box-shadow: 0 0 15px rgba(168, 85, 247, 0.6);

}

50% {

  transform: scale(1.2);

  /* Intensify the shadow when scaled up to enhance the glow effect */

  box-shadow: 0 0 25px rgba(168, 85, 247, 0.8), 0 0 40px rgba(236, 72, 153, 0.4);

}

}



/* Ripple expanding animation */

@keyframes ring-pulse {

0% {

  transform: scale(1);

  opacity: 1;

  border-width: 2px;

  border-color: rgba(99, 102, 241, 1);

}

50% {

  border-color: rgba(168, 85, 247, 0.5);

  border-width: 1px;

}

100% {

  transform: scale(3.5);

  opacity: 0;

  border-width: 0px;

  border-color: rgba(236, 72, 153, 0);

}

}

</style>

Browser Support

| Browser | Support Status | Notes |

| --- | --- | --- |

| Chrome | ✅ Supported | |

| Safari | ✅ Supported | |

| Firefox | ✅ Supported | |

| Edge | ✅ Supported | |