Loading ripple

Introduction

The Ripple example shows how to create an expanding ripple loading animation. Three circles scale outward while fading, creating a continuous pulsing effect that's perfect for loading indicators.

This example uses the animate prop to create looping animations with staggered delays, making each ripple start at a different time.

Get started

Let's start with the basic structure. We need three overlapping circles:

"use client"

function LoadingRipple() {
    return (
        <div className="container">
            <div className="ripple-container">
                <div className="ripple" />
                <div className="ripple" />
                <div className="ripple" />
            </div>
            <StyleSheet />
        </div>
    )
}

function StyleSheet() {
    return (
        <style>
            {`
            .container {
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .ripple-container {
                position: relative;
                width: 100px;
                height: 100px;
            }

            .ripple {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                border-radius: 50%;
                border: 5px solid var(--hue-1);
                will-change: transform, opacity;
                opacity: 0;
            }
            `}
        </style>
    )
}

export default LoadingRipple

The ripples are positioned absolutely so they stack on top of each other.