<div class="loader"></div>About this animation
A striped ice lolly drawn with one element, a repeating gradient and a stack of masks that bite it away step by step, then reset.
How it works
The lolly is a single element. A repeating diagonal gradient paints the stripes, and a stack of radial-gradient masks is animated from zero size to full size one after another, so round bites seem to be taken out of it. A second layer draws the stick, and the loop restarts when every mask is full.
Ways to customise it
- Change #91d2e2 and #1296a7 to recolour the stripes.
- Edit the 25px and 30px mask sizes for bigger bites.
- Change the animation duration for a faster or slower snack.
Good to know
Add a visible or aria-live Loading message near it, because the shape alone says nothing to assistive tools. CSS masks are supported by all current browsers, and the code includes the prefixed property for older WebKit.
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.