20 Pure CSS Animated Page Loaders

Page loaders are often used on websites to give the user something to watch while the content is loading in the background, as well as signaling to the user that something is happening rather than just watching a blank screen while the page loads. Creative designers have come up with a multitude of ways to make page loaders entertaining, interesting, engaging, and even fun, so as not to bore the user. In this collection of pure CSS animated page loaders, we’ve gathered a variety of clever and unique examples for your inspiration. Perhaps you will be able to use some of them in your projects, or maybe they will inspire you to create your own unique spin on the genre.

OuroboroCSS

Here are 9 variations on a theme.

See the Pen CSS Loader by Geoffrey Crofte (@GeoffreyCrofte) on CodePen.

Animated Squares

9 squares that randomly animate into view in a larger square.

See the Pen CSS Loader by Glen Cheney (@Vestride) on CodePen.

Hexagons

This group of hexagons that form a larger hexagon is soothing and engaging.

See the Pen Loading Image by Doug Harper (@endodoug) on CodePen.

Overlapping Circles

Using a relatively common idea among page loaders, this one kicks it up a notch from the basic dots on the screen.

See the Pen css loader by Connor (@CKH4) on CodePen.

Pure CSS Loader

This animation is playful and mildly captivating.

See the Pen Pure CSS loader #2 by Jerome Renders (@JeromeRenders) on CodePen.

Pushing Pixels CSS Loader

Simple but smooth, this is another variation of the timeless loading dots animation.

See the Pen pushing pixels css loader by dave (@redlabor) on CodePen.

Infinity Loader

Another engaging and different animation that has some options you can play around with.

See the Pen CSS Infinity Loader by Michael Hobizal (@mikehobizal) on CodePen.

Single Circle

Although extremely simple, this one still gets the job done of captivating the user momentarily.

See the Pen Loader by Vadzim Tsupryk (@meecrobe) on CodePen.

Pure Css Loader – Square

Similar to the previous 9-square animation, yet more methodical in how it brings each square into view and back out again.

See the Pen Pure Css Loader – Square by Robert Borghesi (@dghez) on CodePen.

CSS Loading Spinner

A very cool, colorful, and clean animation in this one.

See the Pen CSS3 Loading Spinner by Iván Villamil (@ivillamil) on CodePen.

Spelling Loader

There are several animations happening in this page loader.

See the Pen CSS Loader by Paolo Duzioni (@Paolo-Duzioni) on CodePen.

Gooey CSS Loader

We’re always a sucker for the gooey animation effects, like what is seen here.

See the Pen gooey css loader by Decatron (@megatroncoder) on CodePen.

Helix CSS Loader

A very nicely done 3D helix animation can be found here.

See the Pen Helix CSS Loader by Jerry Low (@jerrylow) on CodePen.

Wifeo Loader

Another colorful and fun animated circles page loader.

See the Pen PURE CSS LOADER by Wifeo (@wifeo) on CodePen.

Simple Pure CSS Loader

Looking almost cartoon-like, this one show how you can play with almost any shapes and lines to create a unique page loader.

See the Pen Simple Pure CSS Loader by Izzy Skye (@chrysokitty) on CodePen.

Lines Loader

How about taking the hamburger menu icon and making it a colorful page loader animation?

See the Pen Daily UI #20 | CSS loader by Håvard Brynjulfsen (@havardob) on CodePen.

Fancy CSS Loaders / Spinners

Here’s another collection of 9 different page loaders.

See the Pen Fancy CSS loaders / spinners by Jenning (@jenning) on CodePen.

Animated Circle Loader

Don’t look at this one too long or you might end up hypnotized!

See the Pen CSS Loader animation by Sonja Strieder (@sonjastrieder) on CodePen.

Circles Loader

Another example of all the fun that can be had with circles.

See the Pen CSS Loader animation by Uwe Chardon (@uchardon) on CodePen.

Geometric Loader

This last one is a nice, smooth, and mesmerizing geometric animation.

See the Pen Pure CSS loader #4 by Jerome Renders (@JeromeRenders) on CodePen.

Be sure to check out our other collections here on 1stWebDesigner for more inspiration, learning, and just plain fun!