In the past, loading animations have been built using animated GIFs, or through JavaScript timers, both of which are outdated. Take advantage of GPU rendering through CSS animations with these beautifully designed CSS loaders.
If you like this, you’ll love our favorite CSS3 resources, check it out here.
loaders.css
A collection of loading animations written entirely in css. Each animation is limited to a small subset of css properties in order to avoid expensive painting and layout calculations.
CSS spinners
A gallery of pure CSS spinners and loading indicators.
SpinKit
SpinKit uses CSS animations to create smooth and easily customizable animations. The goal is not to offer a solution that works in every browser—if you’re supporting browsers that haven’t implemented the CSS animation property (e.g. IE9 and below), you’ll want to detect support for the animation property, and implement a fallback.
Pure CSS Loading Animation
There are plenty of resources on the web to find or create animated GIFs to denote when something in your app is waiting or loading. In my case I was always left wanting something simple that would work on any background and not require extra images or even elements on the page. Instead, here’s how you can use CSS to create a loading animation to fit that bill.
Fade Loding
based on previous pen: http://codepen.io/diegopardo/pen/JFBCn.
CSS3 Animated Loading Bar
Inspired by 37 Signals loading bar (pictured above) and making good use of Chris Coyier’s tutorial on CSS3 Progress Bars.
Creative CSS Loading Animations
In this tutorial you’ll learn how to make some creative css-only loading animations also known as activity indicators.
PayPal loading animation
The paypal loading animation by Fabrice Weinberg. This is working in all major browser now. Webkit and IE10 are the only browser which support the animation of the background-image property.
The Facebook Loading Animation in CSS
Learn how to make an awesome animation using multiple background images and linear gradients in CSS. We will build the Facebook loading animation using just a single HTML element.
CSS3 loading animation experiment
in this article you’ll see an experiment about how to create a simple CSS3 loading animation.
CSS3 Loading Animation Loop
this time we’re going to see and create three CSS3 animation loop, can be used in many fields, such as preloader for images with jQuery.
Progress Bar
A nice little bit of CSS for a page-loading animation. View source.
CSS3 Ajax Loading Icon Without Images
Ideally, you should give the user some feedback to indicate their action is being processed. You’ll often see small animated GIFs with rotating patterns. There are several sites which will create them for you, such as preloaders.net and ajaxload.info.
