Components
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.
npx shadcn@latest add https://21st.dev/r/ruhith369/block-loaderLoading preview...
"use client";
import React from "react";
import BlockLoader from "@/components/ui/block-loader";
const BlockLoaderDemo = () => {
return (
<div className="flex flex-col items-center justify-center">
<BlockLoader
blockColor="bg-blue-500 dark:bg-blue-400"
borderColor="border-blue-500 dark:border-blue-400"
size={80}
gap={6}
speed={1.2}
/>
</div>
);
};
export default BlockLoaderDemo;