← All elements
<div class="hl"><i></i><i></i><i></i><i></i><i></i><i></i></div>About this hexagon
Six hexagon cells that light up in turn around a ring, built with clip-path and staggered animation delays.
How it works
Six hexagons are placed around a circle using a rotate, translate, then rotate-back chain driven by a custom property for each position. Each shares one keyframe that flashes it bright for a moment, and the delay grows by 0.2 seconds per hexagon, so the highlight travels around the ring like a spinner.
Ways to customise it
- Change #38bdf8 and the bright colour in the keyframe.
- Edit the translateY of 42px for a bigger or smaller ring.
- Change the 1.2s duration.
Good to know
Add a visible or aria-live message such as Loading next to it. Reduced motion users see a static, partly lit ring. clip-path is supported everywhere current.
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.