# BarLoader

> The BarLoader is a sleek, animated loading component for React applications, designed to provide a visually engaging feedback during data fetching or processing. It features multiple vertical bars that scale up and down in a smooth, rhythmic motion, creating a pulsating effect that draws attention without being distracting. Each bar’s height, width, color, number of bars, and animation speed are fully configurable, allowing developers to easily adapt the loader to match their application’s design and theme, including dark and light modes with Tailwind CSS. The animation is implemented using inline CSS keyframes, ensuring lightweight performance without external dependencies. Its minimal yet dynamic design makes it ideal for dashboards, landing pages, and interactive UI elements, providing a professional and modern loading experience.

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

## Install

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