Had the idea to make some loading spinners using CSS a couple of months ago. Inevitably the internet got there first, and there are already many excellent examples out there, including one from Codepen‘s “Top 100 Pens of the Year” no less – so yeah, not a new idea.

However, there was one thing I felt I could bring to the party – most of the examples I found used extra html elements, making them messier, and harder to add and remove via JS, so I made a bunch using just a class name attached to an existing containing element.

See the Pen CSS loading spinner experiments by Mat Hampson (@mathampson) on CodePen.

So if you have a container you’re loading stuff into all you need to add to the loading class is a *{display: none;} to hide whatever’s in there, and maybe a default height to give the spinner some space.

(Note the waning moon version requires spinning the container, which won’t be acceptable in every situation.)