Loading: Circle spinner

Introduction

The Circle Spinner example shows how to create a classic loading spinner using Motion. 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 call:

animate(".spinner", { transform: "rotate(360deg)" }, { duration: 1.5, repeat: Infinity })

Get started

Let's start with the HTML structure:

<div class="container">
    <div class="spinner"></div>
</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 the animate function from Motion:

import { animate } from "motion"

Add the rotation animation

Now call animate to create the spinning effect:

animate(
    ".spinner",
    { transform: "rotate(360deg)" },
    {
        duration: 1.5,
        repeat: Infinity,
        ease: "linear",
    }
)

The animation 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.

Conclusion

In this tutorial, we learned how to:

• Create an infinitely rotating animation using the animate function
• Use repeat: Infinity to loop an animation forever
• Apply linear easing for consistent rotation speed
• Use transform directly for hardware-accelerated animations

This simple spinner pattern can be customized with different sizes, colors, and rotation speeds to match your application's design.