# AnimatedBoxLoader

> This CSS animation defines a smooth looping motion that makes a box appear to travel around the edges of a square container while changing its shape dynamically at each corner. The @keyframes move sequence adjusts the width, height, margins, and border-radius of the box to simulate rounded transitions and smooth corner turns. As the animation progresses through key stages (12.5%, 25%, 37.5%, etc.), the box stretches horizontally or vertically and rounds specific corners to give a flowing, fluid effect. When combined with the .animate-move class, this animation brings a lively geometric movement that feels both mathematical and elegant—perfect for visually engaging loaders, UI highlights, or modern motion effects.

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

## Install

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