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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds BouncingCirclesLoader to your project and fits it to your theme.

// app/(components-demo)/bouncing-loader-demo.tsx
"use client";

import React from "react";
import BouncingCirclesLoader from "@/components/ui/bouncing-circles-loader";

export default function BouncingLoaderDemo() {
  return (
    <div className="flex flex-col items-center justify-center min-h-screen gap-8">

      {/* Default loader */}
      <BouncingCirclesLoader />

      {/* Customized loader */}
      <BouncingCirclesLoader
        size={150}
        circleSize={25}
        circleCount={12}
        color="bg-blue-500 dark:bg-blue-300"
        speed={1.5}
      />
    </div>
  );
}