Loader/spinner icons are a part of almost any web project that involves Ajax requests. The loading indicators that are mostly used in Ajaxed interfaces are shifting from images to HTML-elements for max. flexibility. For this roundup I would like to present our audience a hand-picked list of CSS SVG Loading Spinners for your next projects. You can beautify and minify the CSS code using this web-based online tool CSS Beautifier to improve the readability and performance of the CSS code.
Feel free to download and use them as a loading indicator for your dynamic content like AJAX loader, image/content lazy loading indicator, image preloader, and much more. If you are aware of any other CSS and SVG loader, spinner kits, please do share us by posting a comment below, we would love to hear your feedback. Enjoy !!
1. Collection of SVG Loaders
If you are into designing for multiple resolutions, SVG is the best option to turn to as far as the use of graphics is concerned. These small vector files can be scaled up and down as you like it without sacrificing quality. SVG Loaders is a collection of simple SVG loaders and spinners created and released by Sam. No images used, pure svg/css and scaleable.
2. CSS Loaders
Single Element CSS Spinners is a collection of loading spinners animated with CSS. Each spinner consists of a single div with a class of ‘loader’ and content text of ‘Loading…’. The text is for screen readers and can be used as a fallback state for older browsers. The aim of this project was to create a set of minimal loading spinners that are visually appealing and also convey their intended meaning. Each loader is given a font size in pixels and all other sizes are in ems so to change the size of a loader, just adjust the font-size.
3. Pure CSS & Simplistic Loader/Spinner
Lea Verou, an inspiring web designer has recently shared a simplistic solution to create a spinner with pure CSS. There are already other solutions but this one is the cleanest of them all,uses only 2 elements and not much of CSS. Everything is sized with ems, so it can be resized however preferred, it works on all modern browsers and has a fallback text for others.
4. Spinkit
SpinKit contains some simple but awesome loading spinners animated with CSS. They use 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 building a site with users running IE9 and below, you’ll want to detect support for the CSS animation attribute, and implement a fallback animation (e.g. a GIF.)
5. Zero Element Loading
With a “zero element” loading animation, a loading state can be applied to any element with just the addition of a class name.
6. Spin.js
Spin.js is a tiny JavaScript library that enables us to generate loading/activity indicators without any images. It creates the UI with CSS3 (VML in Internet Explorer) and works in all browsers (even in IE6). The spinners can be customized in several ways like setting the number of lines, their color, length, width, radius, speed of the animation and the trail effect. Such a flexibility ends up in many possible variations.
7. CSS Only Loaders
In this article we will show some examples on progressbars and loading indicators built purely with CSS – without JavaScript and without images.
8. Sonic
Sonic is a tiny JavaScript class for creating such loader images with HTML5 canvas. It works by drawing a shape at tiny intervals along a pre-defined, custom path where sizes, colors or fps can all be customized. There are ready-to-use examples provided and a web-based Sonic Creatorexists for creating loaders and getting them as a HTML5 canvas code, animated GIF or a sprite image with the CSS3 code.
9. CSS Loading Spinners
A collection of spinners using CSS, keyframes and basic animation. No JS.
10. Loading Animation
Replicated the loading animations from http://jxnblk.github.io/loading/made only with CSS/HTML instead of SVG.
11. Block Loaders
A selection of loaders all based around a line of 6 blocks. Uses CSS3 animation and transforms to create a variety of subtle loading effects. Inspired by the loading animation on the PSN mobile site (which uses the Flip Delay Up example for their loader).
12. SVG Circus
SVG Circus enables you to create cool animated SVG spinners, loaders and other looped animations in seconds.
13. Nice CSS3 Based Loading Spinner
A nice looking loading spinner that creates an animated loader for Ajax requests in a creative way, based on CSS3 animations.
14. Pure CSS Loader Kit
Single Element pure CSS Spinners & Loaders.
15. Animated Loaders Kit
Small collection of 10 CSS-only animated loaders. This kit stuff will save you a lot of time when creating websites! They’re really easy to use and have very nice interfaces.
16. SVG Loading Icons
Animated SVG for use as loading animations.
17. Loading
Loading is a collection of simple SVG loaders and spinners created and released by Jxnbln.
18. Loading.io
loading.io is built upon bootstrap, angularjs, canvg, gif.js and require.js . Some of them use quite new technologies such as web workers, so you might need a new enough browser that supports html5 to play with this site.
