Michael Haren’s Wassupy Blog

A dash of whimsy with a tiny loading animation

in code

It’s neat how a teensy little animation can add a little whimsy to an otherwise boring thing like loading a bunch of contact cards:

This is achieved with pretty much the most naive code you can imagine. I’m using JS to add the elements with opacity: 0, and then schedule their reveal with a random delay:

// ...
document.getElementById('output').appendChild(el);

setTimeout(() => {
    el.classList.add('show'); // sets `opacity: 1;`
}, Math.random() * 500);

This would work just as well for elements already in the DOM, too.