The HorizonX loading animation: four shapes alternate between a diagonal ring and the HALO figure, then resolve into the logo and its name.
About this tool
Four shapes travel together, turning 45° on every change while each one morphs: the diagonal ring of four thin ellipses, the HALO figure of two wide and two narrow ellipses, a couple of times each, and then the four-leaf HorizonX symbol, which slides left while the wordmark rises out from behind it. Use it once as an intro, or in loop mode for as long as a wait lasts and call finish() to resolve into the logo. Pure SVG with no dependencies; stage colour, ink, size, cycles, speed and replay are editable live, and reduced motion shows a still frame.
In collections: CSS Loaders & Loading Animations
UI/UX · HTML / JS · All tools