Tumblr-style cog spinners
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist Initial release Aug 5, 2014
README.md
index.html

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 `` 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

Created and maintained by Pasquale Vitiello under the MIT license.