Circular Water Fill Loading Animation

If you have content or page that will take a long time to load, you should give the user feedback . For this reason we provide a CSS loading-animation.

Newton’s Cradle Loading Animation

newtons cradle loader

Newton’s Cradle loading animation designed by Steven Traversi.

See the Pen
Newton’s Cradle Loader
by Steven Traversi (@straversi)
on CodePen.

GIT Kraken Inspired Rotate Loading Animation

GIT Kraken Inspired Rotate Loading Animation

This loading animation was designed by Colin Horn, it has a spinning circular loader and will look great on pages that are content heavy and needs to show a loader before revealing the content.

See the Pen
Rotate / Pulse Loading Animation
by Colin Horn (@colinhorn)
on CodePen.

Hexagon to Cube Animation Snippet

Hexagon to Cube Loading Animation

A fancy loading animation that alternated between a cube that splits into a hexagon and gets put back together as a cube, it was designed by Ives van Hoorne in pure CSS.

See the Pen
3D Cube Loading Animation
by Ives van Hoorne (@CompuIves)
on CodePen.

Loading Text Wave Animation

Loading Text Wave Animation

A nice loading text animation designed by AhmedElmsery in pure CSS. Each character of the word loading is displayed with a wave animation.

See the Pen
Loading page
by AhmedElmsery (@ahmedelmsery)
on CodePen.

Spinning Loading Animation in CSS

Spinning Loading Animation in CSS

A simple loading animation in Pure CSS designed by Tyson Matanich. A radar-like spinning animation that will go well on any pages where you want to show a loading animation.

See the Pen
meVQpg
by Tyson Matanich (@tysonmatanich)
on CodePen.

Pure CSS Potion Loading AnimationPure CSS Potion Loading Animation

This is a pure CSS loading animation that looks like potion filling up in a test tube. It was designed by Michael Mangialardi.

See the Pen
Potion Loader | Pure CSS
by Mike Mangialardi (@mikemang)
on CodePen.

Infinity Preloader

Infinity Preloader

Loading more content for your visitors, why not display this fancy infinity preloader while the content loads? This was designed by Adam Hopkins.

See the Pen
Infinity loader
by Adam Hopkins (@ahopkins)
on CodePen.

A Simple Upload Button Animation

A Simple Upload Button Animation

Check out this cool upload button animation designed by Eva Lettner. When you click on the upload button, the circular space will start to fill up and the upload icon will transform into a tick icon. Simultaneously the upload button will transform into a reset button. And when you click on the reset button everything will reverse. The circular space will get emptied, the tick icon and the reset button will change into upload option.

See the Pen
Upload Button
by Eva Lettner (@eva_trostlos)
on CodePen.

Submit Button with Loading Animation on Click

Submit Button with Loading Animation on Click

This cool code snippet by Elior Shalev Tabeka gives user direct feedback upon submit button with built-in loading indicator. When you click on the animated go button, that changes its background colour upon hovering, will transform into loading indicator and then to a success button with a green background.

See the Pen
Button with Built-in Loading Indicator -JS and SCSS
by Elior Tabeka (@eliortabeka)
on CodePen.

Circular Water Fill Loading Animation

Circular Water Fill Loading Animation

When you want to show a loading animation in a web page, this might be an elegant solution for you. When this snippet loads you will see water filling up in a circular space along with the percentage

See the Pen
wavePercent
by Elaine (@ElaineXu)
on CodePen.

Pure CSS Bookshelf Loading Animation

Pure CSS Bookshelf Loading Animation

Nice little loading animation using pure CSS. This animation shows a stack of folders or books falling over and is perfect for libraries or book club related websites. Designed by Antoine Grélard.

See the Pen
#Codevember – Day 6 – Bookshelf loader
by Grélard Antoine (@ikoshowa)
on CodePen.

Pure CSS Loading Animation

Pure CSS Loading Animation

This is cool loading animation using pure CSS. Designed by Jack Doyle.

See the Pen
Loading Animation
by Jack Doyle (@jack-doyle)
on CodePen.

Skype SVG Loader

Skype SVG Loader

See the Pen
CSS/SVG stroke Skype Loader
by Jake Albaugh (@jakealbaugh)
on CodePen.

Windows 8 Busy Loader in Pure CSS

Windows 8 Busy Loader in Pure CSS

A simple Windows 8 like busy loader in pure CSS. You can use it as preloader or ajax call loader.

See the Pen
Windows like Busy loader
by Dave (@DaveGag)
on CodePen.

Material Design Google Loader in CSS

Material Design Google Loader in CSS

Check out this simple material design loader inspired by Google’s loader. This is pure CSS wizardry. Designed by Jacob Zimmerman.

See the Pen
Modern Google Loader in Pure CSS
by jczimm (@jczimm)
on CodePen.

Flipping Frying Pan Loading Indicator

Flipping Frying Pan Loading Indicator

You must know by now that we love our pancakes, we have seen pancake inspired toggle switch and now we have a loading indicator in pure CSS by Pawel where we see a pancake being flipped in a frying pan.

See the Pen
‘Making pancake’ loader
by Pawel (@pawelqcm)
on CodePen.

Pure CSS Impatient Finger Drumming Loading Animation

Pure CSS Impatient Finger Drumming Loading Animation

In the real world drumming or tapping the fingers can indicate frustration so I am not sure why you would want this as a loading indicator on your webpage but if you do this snippet by Petr Urbánek does just that.

See the Pen
Hand animation – loading
by r4ms3s (@r4ms3s)
on CodePen.

A Gooey Circular Spinner

A Gooey Circular Spinner

In this particular SVG snippet, Alexandr Izumenko has recreated the gooey circular spinner from a dribbble shot by Misha Heesakkers. The circle splits up into three smaller circles then does a circular loop them merges back to a bigger circle.

See the Pen
Gooey loader
by Alexandr Izumenko (@Izumenko)
on CodePen.

Christmas Stocking Loading Animation

Christmas Stocking Loading Animation

Looking for a Christmasy preloader for your webpage? Have a look at this loading animation designed by Tim Rijkse. It has an animated snowfall in the background and a bunch of Christmas stockings that appear and disappear every few seconds.

See the Pen
Xmas preloader
by Tim Rijkse (@timrijkse)
on CodePen.

Lego Style Loading Animation

Lego Style Loading Animation

This lego inspired loading animation designed by Chris Gannon shows a bunch of lego blocks moving around.

See the Pen
LEGO Loader
by Chris Gannon (@chrisgannon)
on CodePen.

Pure CSS Gradient Colour Slide Puzzle Style Loading Animation

Pure CSS Gradient Colour Slide Puzzle Style Loading Animation

This pure CSS gradient loading animation was designed by Andreas Hjortland it feels like a slider puzzle, there is a colourful version of this too.

See the Pen
loading
by Andreas Hjortland (@andreas_hjortland)
on CodePen.

Pure CSS Solid Colour Slide Puzzle Style Loading Animation

Pure CSS Solid Colour Slide Puzzle Style Loading Animation

With this loader animation, which is done in pure CSS you can see that it looks like a slider puzzle with multiple squares moving in and out trying to solve the puzzle. This code snippet was designed by Andreas Hjortland.

See the Pen
loading without gradient
by Andreas Hjortland (@andreas_hjortland)
on CodePen.

Elite Dangerous Loader in Pure CSS

Elite Dangerous Loader in Pure CSS

Looking to add a preloader to your website this Elite Dangerous game inspired loader might be just what you are looking for. It was designed by James Panter. It shows a hexagon split up into multiple triangles with a circular sweeping motion of light in it.

See the Pen
Elite Dangerous Inspired Loader – Pure CSS
by James Panter (@jpanter)
on CodePen.

Leave a Reply