zen-li / tumblr-style-cog-spinners

Tumblr-style cog spinners

Tumblr-Style-Cog-Spinners

Tumblr-style cog loading animation made with CSS and SVG icons designed by Jiri Silha.
View Demo

Markup

Include to your pages the HTML code, just before the closing `` tag:

<div id="loader" class="overlay-loader">
	<div class="loader-background color-flip"></div>
	<img class="loader-icon spinning-cog" src="cogs/cog01.svg" data-cog="cog01">
</div>

Don't forget to include the SVG icon you wish to use.

CSS

Include the file `cog.css` into the `` section, or add its content to your stylesheet.

Javascript

Use your favourite method to make the loader disappear when website content is loaded. Here is a jQuery example:

jQuery(window).load(function($) {

    $('.loader-icon').removeClass('spinning-cog').addClass('shrinking-cog');
    $('.loader-background').delay(1300).fadeOut(); 
     
});

A good alternative is using DeSandro's imagesLoaded plugin to detect when images have been loaded.

Playground

Here is a pen you can play with!

Credits

• PSD cog icons by Jiri Silha
• Tumblr