← All elements
<div id="overlay">
<div class="container">
<div class="bg circle"></div>
<div class="outermost circle"></div>
<div class="outer circle"></div>
<div class="middle circle"></div>
<div class="middle2 circle"></div>
<div class="middle3 circle"></div>
<div class="inner circle"></div>
<div class="innermost3 circle"></div>
<div class="innermost2 circle"></div>
<div class="innermost circle"></div>
</div>
</div>About this animation
A sci-fi dial of concentric arcs that spin at different speeds and directions inside a dark core with a blue rim.
How it works
A black disc with a blue rim holds several circles with only some borders coloured. Two spin keyframes turn them clockwise and counterclockwise at different speeds, so the arcs appear to chase each other like a heads-up display. The root overlay is fixed so it fills its frame.
Ways to customise it
- Change #0088ff for another HUD colour.
- Edit the five second spin duration.
- Resize the container width and height.
Good to know
Fixed positioning fills the whole viewport of its frame, so place it in its own container if you reuse it. Motion can be reduced with a media query.
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.