Motion+

Loading ripple

An example of creating a ripple loading animation with Motion for React.

Time
5 min
Difficulty
Intro
Access
Motion+
>Live exampleOpen in new tab

Introduction

The Ripple example shows how to create an expanding ripple loading animation. Three circles scale outward while fading, creating a continuous pulsing effect that's perfect for loading indicators.

This example uses the animate prop to create looping animations with staggered delays, making each ripple start at a different time.