BlockLoader

This Block Loader component is a modern, animated loading indicator designed using React, TypeScript, and Tailwind CSS, with ShadCN integration for class management. It features four square blocks that dynamically scale in sequence, creating a smooth, pulsating effect that visually indicates ongoing activity or loading. The component is highly configurable, allowing developers to adjust the block size, gap, colors, border, and animation speed to match any UI theme, including support for dark and light modes. Its clean, minimal design makes it suitable for dashboards, modals, and full-page loaders, while the flexible Tailwind CSS implementation ensures seamless integration with responsive layouts and modern frontend projects.

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

import BlockLoader from "@/components/ui/block-loader";

const settings = { speed: 1, size: 75, gap: 4 };

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  return (
    <div className="h-screen w-screen flex items-center justify-center">
      <BlockLoader speed={s.speed} size={s.size} gap={s.gap} />
    </div>
  );
}