HTML + CSSLoaders
Hexagon ring loader
Six hexagons arranged in a ring that light up one after another, passing the glow around.
Settings
72px
1x
Code
<div class="ul-hex"><i style="--i:0"></i><i style="--i:1"></i><i style="--i:2"></i><i style="--i:3"></i><i style="--i:4"></i><i style="--i:5"></i></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Loaders
Where to use it
Hexagons bring to mind molecules, honeycombs and blockchain diagrams, so this ring feels natural on a crypto wallet dashboard, the site of a biotech lab or the online shop of a local honey producer. Each cell lights up in turn and fades through the second color, making a slow lap around the center.
It pairs nicely with the honeycomb background in this library if you want a consistent theme. Give the two colors a clear difference in brightness; that is what makes the glow visibly travel from cell to cell.