Loading: Pulse dots

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 Vue structure:

<template>
  <div class="container">
    <div class="dot" />
    <div class="dot" />
    <div class="dot" />
  </div>
</template>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #ff0088;
  will-change: transform;
}
</style>

Let's animate!

Import from Motion

Import the motion component:

<script setup>
import { motion } from "motion-v"
</script>

Add the pulse animation

Define the pulse animation using variants:

<script setup>
import { motion } from "motion-v"

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

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:

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

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.