Tumblr-style cog spinners
HTML CSS JavaScript
Latest commit 0e55001 Sep 9, 2016 @pasqualevitiello committed on GitHub Add license
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



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


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

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


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


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

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



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


Here is a pen you can play with!


Created and maintained by Pasquale Vitiello under the MIT license.