Loading: Circle spinner

Matt Perry

In this tutorial, we're going to build the Loading: Circle spinner 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 Circle Spinner example shows how to create a classic loading spinner using Motion for React. This simple yet effective animation continuously rotates a styled circle, providing users with visual feedback that content is loading.

Infinite rotation is achieved with a single animate prop:

animate={{ transform: "rotate(360deg)" }}

Get started

Let's start with a basic spinner element using CSS styling:

export default function LoadingCircleSpinner() {
    return (
        <div className="container">
            <div className="spinner" />
        </div>
    )
}

The spinner is styled as a circle with a partially colored border, creating the classic loading indicator appearance:

.spinner {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 4px solid var(--divider);
    border-top-color: var(--hue-1);
}

Let's animate!

Import from Motion

First, import motion from Motion for React:

import { motion } from "motion/react"

Convert to motion component

Replace the static div with a motion.div:

<motion.div className="spinner" />

Add the rotation animation

Now add the animate prop to create the spinning effect:

<motion.div
    className="spinner"
    animate={{ transform: "rotate(360deg)" }}
    transition={{
        duration: 1.5,
        repeat: Infinity,
        ease: "linear",
    }}
/>

The transition configuration:

duration: 1.5 - Each full rotation takes 1.5 seconds
repeat: Infinity - The animation loops forever
ease: "linear" - Maintains constant speed throughout the rotation

Using linear easing is essential for spinners, as it prevents the animation from speeding up or slowing down, creating a smooth, consistent rotation.

Why use transform directly?

We're using transform: "rotate(360deg)" instead of the shorthand rotate: 360. Animating the transform property directly enables hardware-accelerated animations, which run on the GPU rather than the CPU. This is especially important during loading sequences, as loading is typically a time of heavy CPU load. By offloading the animation to the GPU, the spinner remains smooth even when the main thread is busy. Learn more about web animation performance.