Loading: Pulse dots

Matt Perry

In this tutorial, we're going to build the Loading: Pulse dots example step-by-step.

This tutorial is rated beginner difficulty, which means we'll spend some time explaining the Motion APIs that we've chosen to use (and why), and also any browser APIs we encounter that might be unfamiliar to beginners.

Here's a live demo of the example we're going to be creating:

Introduction

The Pulse dots example shows how to create a classic three-dot loading animation where each dot pulses in sequence. This common loading indicator pattern is found in messaging apps and loading states.

This example uses the animate prop to trigger animations and variants to define reusable animation configurations. The key feature is child animation sequencing using staggerChildren to automatically delay each child's animation.

Get started

Let's start with the basic markup and styles:

"use client"

function LoadingThreeDotsPulse() {
    return (
        <div className="container">
            <div className="dot" />
            <div className="dot" />
            <div className="dot" />
            <StyleSheet />
        </div>
    )
}

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

            .dot {
                width: 20px;
                height: 20px;
                border-radius: 50%;
                background-color: var(--hue-1);
                will-change: transform;
            }
            `}
        </style>
    )
}

export default LoadingThreeDotsPulse

Let's animate!

Import from Motion

First, import the components we need:

import { motion, Variants } from "motion/react"

Add the pulse animation

Define the pulse animation using variants:

const dotVariants: Variants = {
    pulse: {
        scale: [1, 1.5, 1],
        transition: {
            duration: 1.2,
            repeat: Infinity,
            ease: "easeInOut",
        },
    },
}

The scale array [1, 1.5, 1] creates a keyframe animation where the dot starts at normal size, grows to 1.5x, then returns to normal.

Apply Motion to the elements

Convert the elements to motion components and apply the stagger effect:

<motion.div
    animate="pulse"
    transition={{ staggerChildren: -0.2, staggerDirection: -1 }}
    className="container"
>
    <motion.div className="dot" variants={dotVariants} />
    <motion.div className="dot" variants={dotVariants} />
    <motion.div className="dot" variants={dotVariants} />
    <StyleSheet />
</motion.div>

The parent's staggerChildren: -0.2 delays each child's animation by 0.2 seconds. The staggerDirection: -1 reverses the order, creating a wave effect from right to left.

Conclusion

We've built a smooth pulsing dots animation using Motion's variant and stagger systems. By defining the animation once in variants and using staggerChildren on the parent, we created an elegant sequential effect with minimal code.