Bouncing ball loader
A ball that drops, squashes flat on the floor and stretches as it springs back up, with a shadow that follows.
Settings
Code
<div class="ul-sq"><b></b></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
Squash and stretch is one of the first principles animators learn, and this bouncing ball shows it off nicely. That makes it a fun wink on an animation studio’s portfolio, and a natural fit for a sports shop selling balls and rackets or a gym’s class booking page. The shadow grows as the ball nears the floor.
It needs vertical space, about twice its width, so give it a tall spot. A single strong color works best, since the ball and its shadow share it. Slightly slower speeds make the squash more visible and the ball feel heavier.