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.dark

Animated Squares

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

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

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.dark

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.dark

Pure CSS Loader

This animation is playful and mildly captivating.

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

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.dark

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.dark

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.dark

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.dark

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.dark

Spelling Loader

There are several animations happening in this page loader.

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

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.dark

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.dark

Wifeo Loader

Another colorful and fun animated circles page loader.

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

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.dark

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.dark

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.dark

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.dark

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.dark

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.dark

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