Chapter 133: Loading Indicators (Recipes)

Core Idea

Curated recipes from Motion's official examples gallery for loading indicators. Each entry is implemented in one or more of vanilla JS, React, and Vue; consult the framework-specific example on motion.dev for the full runnable version.

Key Concepts

• loading circle spinner (js, react, vue): An example of creating a circle spinner loading animation with Motion.
• loading fill text (js, react, vue): An example of creating a text fill loading animation with Motion.
• loading jumping dots (js, react, vue): An example of creating a jumping dots loading animation with Motion.
• loading line reveal (js, react, vue): An example of creating a line reveal loading animation with clipPath in Motion
• loading progress bar (js, react, vue): An example of creating a progress bar loading animation with Motion.
• loading ripple (js, react, vue): An example of creating a ripple loading animation with Motion.
• loading three dots pulse (js, react, vue): An example of creating a pulsing dots loading animation with Motion.
• infinite loading (react): An example of creating an infinite loading list with staggered animations in Motion for React.
• svg loading spinner (js): An example of using Motion to animate an SVG loading spinner.
• loading infinite path drawing (js): An example of creating an infinite path drawing loading animation with Motion. This example uses svgEffect to animate the path.

Code Examples

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

• What it demonstrates: loading circle spinner pattern.

"use client"

function LoadingFillText() {
    return (
        <div className="container">
            <div className="text-container">
                <div className="text text-bg" aria-hidden>
                    Loading
                </div>
                <div className="text text-fill">
                    Loading
                </div>
            </div>
            <StyleSheet />
        </div>
    )
}

// ...

• What it demonstrates: loading fill text pattern.

Key Takeaways

1. These are recipe-level compositions of core Motion primitives (variants, gestures, layout, scroll, springs), not new APIs.
2. Most recipes exist in multiple frameworks with near-identical logic, only the component syntax differs.
3. Reach for the closest-matching recipe as a starting point, then adapt timing/easing/spring values to the design.

Connects To

• Transitions, Keyframes & Variants: recipes here compose those lower-level primitives.
• Gestures & Interaction: several recipes layer on drag/hover/press gestures.