# LoadingRadar

> The LoadingRadar component is a sleek radar-style loading animation built with React, TypeScript, and Tailwind CSS. It creates a circular scanner effect that continuously rotates, resembling a radar sweep. The outer container is a large dark-bordered circle with inset shadows that give it a 3-D depth. Inside it, there’s a smaller dashed ring and a central dashed circle to mimic radar grid lines. The rotating “sweep” is made using a half-circle span with a glowing green blur and drop-shadow to create a smooth scanning beam. The animation is handled using a custom keyframe named radar81, which spins the sweep 360 degrees every two seconds. This component is entirely responsive, requires no external libraries other than Tailwind, and adds a visually appealing loader for dashboards, analytics pages, or any data-intensive UI where a radar-like loading effect is desired.

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

## Install

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