# BouncingCirclesLoader

> The Bouncing Circles Loader is a visually engaging and highly customizable React component designed to indicate loading or processing states in web applications. It consists of multiple circular elements that rhythmically expand and contract in a staggered sequence, creating a smooth bouncing animation. Each circle’s size, color, and number can be easily configured, allowing developers to match the loader to the application's theme or brand colors. Additionally, the component supports both light and dark modes through Tailwind CSS classes, ensuring consistent appearance across different UI themes. Its flexible design makes it suitable for use as a page loader, inline loader within cards or modals, and it adds a modern, dynamic feel to any interface while signaling activity to users effectively.

- Author: [ruhith](https://21st.dev/@ruhith369)
- License: unknown
- Live preview: https://21st.dev/@ruhith369/components/bouncing-circles-loader

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ruhith369/bouncing-circles-loader?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