# Load Ripple

> The LoadRipple component is a refined and elegant loading indicator that uses five concentric rippling circles to create a calming, wave-like animation. Each layer expands and fades with a staggered delay, producing a smooth, continuous ripple effect that feels dynamic yet minimalistic. Designed with gradient borders, subtle transparency, and backdrop blur, it adapts beautifully to both light and dark modes, adding a touch of sophistication to loading states. Ideal for splash screens, background loaders, or transitional states, the LoadRipple offers a visually appealing way to keep users engaged while content loads.

- Author: [Ruixen UI](https://21st.dev/@ruixen.ui)
- Library: [Ruixen UI](https://21st.dev/@ruixen.ui/library/ruixen-ui)
- License: unknown
- Live preview: https://21st.dev/@ruixen.ui/components/load-ripple

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ruixen.ui/load-ripple?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt