← All elements
<div class="hg"><span></span></div>About this animation
An hourglass drawn with two triangles that flips over while the sand level drains.
How it works
A clip-path polygon cuts a rectangle into an hourglass shape. The sand is a background gradient whose size animates from a filled top to empty, while the whole shape rotates 180 degrees at the end of each cycle.
Ways to customise it
- Change the sand colour.
- Make it larger by scaling the width and height.
- Slow the 2.4s cycle.
Good to know
Add a loading label for assistive technology. The sand animation uses background-size, which is cheap for a small shape.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.