A loader component with a pulse effect featuring beautiful, ripple-like expanding rings.
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.
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.
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.
<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 Status | Notes |
| --- | --- | --- |
| Chrome | ✅ Supported | |
| Safari | ✅ Supported | |
| Firefox | ✅ Supported | |
| Edge | ✅ Supported | |