Overview
A CSS-only loader built from two off-round blobs pushed up out of a circular mask and spun a full turn, so the edge that cuts across the sphere rises and falls and the thing reads as water sloshing. The source geometry is preserved exactly at the shipped defaults, but every length is quoted against the orb diameter, so it holds from a 48px inline spinner to a hero tile. The skin is inverted to the HorizonX light neutrals, with ink kept only for the rim and the ground shadow. HorizonX adds a screen-reader label, a paused state and a reduced-motion pose that parks both tides off-axis instead of hiding them. Edit the size, palette, tide roundness, waterline and cadence, then export one self-contained HTML file.
Highlights
- CSS-only tide with no JavaScript
- Scales from inline spinner to hero tile
- Editable palette, roundness, waterline and cadence
- Screen-reader label and reduced-motion pose