# 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.

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

## Install

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