← All elements
<div class="rs"><i></i></div>About this animation
A radar dial with range rings and a conic sweep arm rotating around it, with a blip that flashes.
How it works
A circle with radial-gradient rings sits under a pseudo-element conic gradient arm that rotates continuously. A small dot flashes once per revolution to suggest a detected object.
Ways to customise it
- Change the greens to another hue.
- Edit the 2.4s sweep time.
- Add more blips with extra elements.
Good to know
It is decorative and the animation stops under reduced motion. Add a text status when it stands for a real process.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.