HTML + CSSLoaders
Square to circle loader
A square that turns, shrinks into a circle and shifts color, then comes back, over and over.
Settings
72px
1x
Code
<div class="ul-morph"></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
This morphing shape has a playful, designed feel, which is why it fits creative sites: the intro of a design studio, the loading screen of an online portfolio or a page transition on an architecture firm’s site. It is a pure CSS loader, a single element with no JavaScript, so it drops into any page.
Pick two colors that sit close together, like two blues or a coral and a pink, so the shift reads as a mood rather than a flash. It deserves some size; below 30 pixels the rotation turns into a twitch.