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
Newton’s Cradle loading animation designed by Steven Traversi.
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.
Hexagon to Cube Animation Snippet
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.
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.
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.
Pure 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.
Loading more content for your visitors, why not display this fancy infinity preloader while the content loads? This was designed by Adam Hopkins.
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.
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.
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
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.
Pure CSS Loading Animation
This is cool loading animation using pure CSS. Designed by Jack Doyle.
Skype SVG Loader
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.
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.
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.
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.
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.
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.
Lego Style Loading Animation
This lego inspired loading animation designed by Chris Gannon shows a bunch of lego blocks moving around.
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.
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.
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.