CSS Snippet – Loader Animation

Paweł Durczok on the

I often found myself looking for loader animation for the sites I’ve built and often ended up with an animated SVG or GIF. While they are ok for most cases they lack the flexibility and control of something you can build on your own.

Therefore I decided I’ll build my own loader animation entirely in HTML/CSS that will be universal enough for most cases and will allow a degree of control when it comes to animation speed, size and positioning I wouldn’t normally get from a graphic file.

This is what I came up with.

See the Pen CSS Loader Animation by Paweł Durczok (@north-of-rapture) on CodePen.

Of course there are many other ways to do it. It could be a rotating semi-circle, or dots that change size, but I wanted something I could use as a full-width element, to indicate loading elements or form validation. 

As always I assume you know the basics of HTML and CSS. Additional comments inside the code. Enjoy.