Tumblr-style cog spinners
HTML CSS JavaScript
Latest commit 0e55001 Sep 9, 2016 @pasqualevitiello committed on GitHub Add license
Permalink
Failed to load latest commit information.
dist Initial release Aug 5, 2014
README.md Add license Sep 9, 2016
index.html Update index.html Aug 14, 2014

README.md

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 </body> 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 <head> 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

Created and maintained by Pasquale Vitiello under the MIT license.