Tumblr Cog Spinners

In this example below you will see how to do a Tumblr Cog Spinners with some HTML / CSS and Javascript

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

Thumbnail
This awesome code was written by pasqualevitiello, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright pasqualevitiello ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Tumblr Cog Spinners</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="loader" class="overlay-loader">
	<div class="loader-background color-flip"></div>
	<img class="loader-icon spinning-cog" src="https://pasqualevitiello.github.io/Tumblr-Style-Cog-Spinners/cogs/cog01.svg" data-cog="cog01">
	<img class="loader-icon spinning-cog hidden" src="https://pasqualevitiello.github.io/Tumblr-Style-Cog-Spinners/cogs/cog02.svg" data-cog="cog02">
	<img class="loader-icon spinning-cog hidden" src="https://pasqualevitiello.github.io/Tumblr-Style-Cog-Spinners/cogs/cog03.svg" data-cog="cog03">
	<img class="loader-icon spinning-cog hidden" src="https://pasqualevitiello.github.io/Tumblr-Style-Cog-Spinners/cogs/cog04.svg" data-cog="cog04">
	<img class="loader-icon spinning-cog hidden" src="https://pasqualevitiello.github.io/Tumblr-Style-Cog-Spinners/cogs/cog05.svg" data-cog="cog05">
	<img class="loader-icon spinning-cog hidden" src="https://pasqualevitiello.github.io/Tumblr-Style-Cog-Spinners/cogs/cog06.svg" data-cog="cog06"> 
	<img class="loader-icon spinning-cog hidden" src="https://pasqualevitiello.github.io/Tumblr-Style-Cog-Spinners/cogs/cog07.svg" data-cog="cog07">
	<img class="loader-icon spinning-cog hidden" src="https://pasqualevitiello.github.io/Tumblr-Style-Cog-Spinners/cogs/cog08.svg" data-cog="cog08">
	<img class="loader-icon spinning-cog hidden" src="https://pasqualevitiello.github.io/Tumblr-Style-Cog-Spinners/cogs/cog09.svg" data-cog="cog09">
	<img class="loader-icon spinning-cog hidden" src="https://pasqualevitiello.github.io/Tumblr-Style-Cog-Spinners/cogs/cog10.svg" data-cog="cog10">
	<img class="loader-icon spinning-cog hidden" src="https://pasqualevitiello.github.io/Tumblr-Style-Cog-Spinners/cogs/cog11.svg" data-cog="cog11"> 		
	<img class="loader-icon spinning-cog hidden" src="https://pasqualevitiello.github.io/Tumblr-Style-Cog-Spinners/cogs/cog12.svg" data-cog="cog12">
	<img class="loader-icon spinning-cog hidden" src="https://pasqualevitiello.github.io/Tumblr-Style-Cog-Spinners/cogs/cog13.svg" data-cog="cog13">
	<img class="loader-icon spinning-cog hidden" src="https://pasqualevitiello.github.io/Tumblr-Style-Cog-Spinners/cogs/cog14.svg" data-cog="cog14">
	<img class="loader-icon spinning-cog hidden" src="https://pasqualevitiello.github.io/Tumblr-Style-Cog-Spinners/cogs/cog15.svg" data-cog="cog15">
	<img class="loader-icon spinning-cog hidden" src="https://pasqualevitiello.github.io/Tumblr-Style-Cog-Spinners/cogs/cog16.svg" data-cog="cog16"> 
	<img class="loader-icon spinning-cog hidden" src="https://pasqualevitiello.github.io/Tumblr-Style-Cog-Spinners/cogs/cog17.svg" data-cog="cog17">
	<img class="loader-icon spinning-cog hidden" src="https://pasqualevitiello.github.io/Tumblr-Style-Cog-Spinners/cogs/cog18.svg" data-cog="cog18">
	<img class="loader-icon spinning-cog hidden" src="https://pasqualevitiello.github.io/Tumblr-Style-Cog-Spinners/cogs/cog19.svg" data-cog="cog19">
	<img class="loader-icon spinning-cog hidden" src="https://pasqualevitiello.github.io/Tumblr-Style-Cog-Spinners/cogs/cog20.svg" data-cog="cog20">
	<img class="loader-icon spinning-cog hidden" src="https://pasqualevitiello.github.io/Tumblr-Style-Cog-Spinners/cogs/cog21.svg" data-cog="cog21"> 	
	<img class="loader-icon spinning-cog hidden" src="https://pasqualevitiello.github.io/Tumblr-Style-Cog-Spinners/cogs/cog22.svg" data-cog="cog22">
	<img class="loader-icon spinning-cog hidden" src="https://pasqualevitiello.github.io/Tumblr-Style-Cog-Spinners/cogs/cog23.svg" data-cog="cog23"> 	
	<img class="loader-icon spinning-cog hidden" src="https://pasqualevitiello.github.io/Tumblr-Style-Cog-Spinners/cogs/cog24.svg" data-cog="cog24">
	<div class="switches">
		<a href="#" class="button switch active" data-trigger="cog01"><img class="switch-icon" src="https://pasqualevitiello.github.io/Tumblr-Style-Cog-Spinners/cogs/cog01.svg"></a>
		<a href="#" class="button switch" data-trigger="cog02"><img class="switch-icon" src="https://pasqualevitiello.github.io/Tumblr-Style-Cog-Spinners/cogs/cog02.svg"></a>
		<a href="#" class="button switch" data-trigger="cog03"><img class="switch-icon" src="https://pasqualevitiello.github.io/Tumblr-Style-Cog-Spinners/cogs/cog03.svg"></a>
		<a href="#" class="button switch" data-trigger="cog04"><img class="switch-icon" src="https://pasqualevitiello.github.io/Tumblr-Style-Cog-Spinners/cogs/cog04.svg"></a>
		<a href="#" class="button switch" data-trigger="cog05"><img class="switch-icon" src="https://pasqualevitiello.github.io/Tumblr-Style-Cog-Spinners/cogs/cog05.svg"></a>
		<a href="#" class="button switch" data-trigger="cog06"><img class="switch-icon" src="https://pasqualevitiello.github.io/Tumblr-Style-Cog-Spinners/cogs/cog06.svg"></a>
		<a href="#" class="button switch" data-trigger="cog07"><img class="switch-icon" src="https://pasqualevitiello.github.io/Tumblr-Style-Cog-Spinners/cogs/cog07.svg"></a>
		<a href="#" class="button switch" data-trigger="cog08"><img class="switch-icon" src="https://pasqualevitiello.github.io/Tumblr-Style-Cog-Spinners/cogs/cog08.svg"></a>
		<a href="#" class="button switch" data-trigger="cog09"><img class="switch-icon" src="https://pasqualevitiello.github.io/Tumblr-Style-Cog-Spinners/cogs/cog09.svg"></a>
		<a href="#" class="button switch" data-trigger="cog10"><img class="switch-icon" src="https://pasqualevitiello.github.io/Tumblr-Style-Cog-Spinners/cogs/cog10.svg"></a>
		<a href="#" class="button switch" data-trigger="cog11"><img class="switch-icon" src="https://pasqualevitiello.github.io/Tumblr-Style-Cog-Spinners/cogs/cog11.svg"></a> 
		<a href="#" class="button switch" data-trigger="cog12"><img class="switch-icon" src="https://pasqualevitiello.github.io/Tumblr-Style-Cog-Spinners/cogs/cog12.svg"></a> 
		<br>
		<a href="#" class="button switch" data-trigger="cog13"><img class="switch-icon" src="https://pasqualevitiello.github.io/Tumblr-Style-Cog-Spinners/cogs/cog13.svg"></a>    	
		<a href="#" class="button switch" data-trigger="cog14"><img class="switch-icon" src="https://pasqualevitiello.github.io/Tumblr-Style-Cog-Spinners/cogs/cog14.svg"></a>
		<a href="#" class="button switch" data-trigger="cog15"><img class="switch-icon" src="https://pasqualevitiello.github.io/Tumblr-Style-Cog-Spinners/cogs/cog15.svg"></a>
		<a href="#" class="button switch" data-trigger="cog16"><img class="switch-icon" src="https://pasqualevitiello.github.io/Tumblr-Style-Cog-Spinners/cogs/cog16.svg"></a>
		<a href="#" class="button switch" data-trigger="cog17"><img class="switch-icon" src="https://pasqualevitiello.github.io/Tumblr-Style-Cog-Spinners/cogs/cog17.svg"></a>
		<a href="#" class="button switch" data-trigger="cog18"><img class="switch-icon" src="https://pasqualevitiello.github.io/Tumblr-Style-Cog-Spinners/cogs/cog18.svg"></a>  
		<a href="#" class="button switch" data-trigger="cog19"><img class="switch-icon" src="https://pasqualevitiello.github.io/Tumblr-Style-Cog-Spinners/cogs/cog19.svg"></a>
		<a href="#" class="button switch" data-trigger="cog20"><img class="switch-icon" src="https://pasqualevitiello.github.io/Tumblr-Style-Cog-Spinners/cogs/cog20.svg"></a>
		<a href="#" class="button switch" data-trigger="cog21"><img class="switch-icon" src="https://pasqualevitiello.github.io/Tumblr-Style-Cog-Spinners/cogs/cog21.svg"></a>
		<a href="#" class="button switch" data-trigger="cog22"><img class="switch-icon" src="https://pasqualevitiello.github.io/Tumblr-Style-Cog-Spinners/cogs/cog22.svg"></a>
		<a href="#" class="button switch" data-trigger="cog23"><img class="switch-icon" src="https://pasqualevitiello.github.io/Tumblr-Style-Cog-Spinners/cogs/cog23.svg"></a> 
		<a href="#" class="button switch" data-trigger="cog24"><img class="switch-icon" src="https://pasqualevitiello.github.io/Tumblr-Style-Cog-Spinners/cogs/cog24.svg"></a>
	</div>
	<a href="#" class="button again">DO IT AGAIN!</a>
  <div class="credits">
    <h2>Tumblr-Style Cog Loader</h2>
    <p>Made with love by <a href="http://pasqualevitiello.com">Pasquale Vitiello</a><span class="sep">&#8226;</span>View on <a href="https://github.com/pasqualevitiello/Tumblr-Style-Cog-Spinners/">Github</a><span class="sep">&#8226;</span>Icons by <a href="https://dribbble.com/shots/1631956-Settings-Icons-PSD">Jiri Silha</a></p>
  </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/pasqualevitiello/tumblr-cog-spinners-fluGx */
.credits {
  position: absolute;
  top: 20px;
  width: 100%;
  text-align: center;  
}

.credits h2 {
  color: #fff;
  font-size: 18px;
  margin-bottom: 4px;
}

.credits p {
  font-size: 12px;
  color: rgba(255,255,255,0.7);
}

.credits a {
  color: rgba(255,255,255,0.7);
  text-decoration: underline;
}

.credits a:hover {
  color: #FFF;
  text-decoration: none;
}

.sep {
  padding: 0 8px;
}

.overlay-loader {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
}

.overlay-loader .loader-background {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #2C4762;
  -webkit-transition: background-color .2s 0s linear,right .2s .3s ease-out;
  -moz-transition: background-color .2s 0s linear,right .2s .3s ease-out;
  -ms-transition: background-color .2s 0s linear,right .2s .3s ease-out;
  -o-transition: background-color .2s 0s linear,right .2s .3s ease-out;
  transition: background-color .2s 0s linear,right .2s .3s ease-out;
}

.overlay-loader .loader-background.color-flip {
  -webkit-animation: color-flip 6.5s .6s infinite linear;
  -moz-animation: color-flip 6.5s .6s infinite linear;
  -ms-animation: color-flip 6.5s .6s infinite linear;
  -o-animation: color-flip 6.5s .6s infinite linear;
  animation: color-flip 6.5s .6s infinite linear;
}

@-webkit-keyframes color-flip {
  0% { background-color: #2c4762 }
  18% { background-color: #2c4762 }
  20% { background-color: #a77dc2 }
  38% { background-color: #a77dc2 }
  40% { background-color: #4aa8d8 }
  58% { background-color: #4aa8d8 }
  60% { background-color: #56bc8a }
  78% { background-color: #56bc8a }
  80% { background-color: #d95e40 }
  98% { background-color: #d95e40 }
  100% { background-color: #2c4762 }
}

@-moz-keyframes color-flip {
  0% { background-color: #2c4762 }
  18% { background-color: #2c4762 }
  20% { background-color: #a77dc2 }
  38% { background-color: #a77dc2 }
  40% { background-color: #4aa8d8 }
  58% { background-color: #4aa8d8 }
  60% { background-color: #56bc8a }
  78% { background-color: #56bc8a }
  80% { background-color: #d95e40 }
  98% { background-color: #d95e40 }
  100% { background-color: #2c4762 }
}

@-o-keyframes color-flip {
  0% { background-color: #2c4762 }
  18% { background-color: #2c4762 }
  20% { background-color: #a77dc2 }
  38% { background-color: #a77dc2 }
  40% { background-color: #4aa8d8 }
  58% { background-color: #4aa8d8 }
  60% { background-color: #56bc8a }
  78% { background-color: #56bc8a }
  80% { background-color: #d95e40 }
  98% { background-color: #d95e40 }
  100% { background-color: #2c4762 }
}

@keyframes color-flip {
  0% { background-color: #2c4762 }
  18% { background-color: #2c4762 }
  20% { background-color: #a77dc2 }
  38% { background-color: #a77dc2 }
  40% { background-color: #4aa8d8 }
  58% { background-color: #4aa8d8 }
  60% { background-color: #56bc8a }
  78% { background-color: #56bc8a }
  80% { background-color: #d95e40 }
  98% { background-color: #d95e40 }
  100% { background-color: #2c4762 }
}

.overlay-loader .loader-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -48px 0 0 -48px;
  font-size: 96px;
  color: #FFF;
}

.button {
  text-decoration: none;
  font-weight: bold;
  text-align: center;
  -webkit-border-radius: 4px;
  border-radius: 4px;    
}

.button:hover {
  text-decoration: none;
}

.button.again {
  position: absolute;
  top: 50%;
  left: 50%;  
  margin-left: -70px;
  margin-top: -21px;
  font-size: 16px;    
  width: 140px;
  padding: 10px 0;
  display: block;
  background-color: #FFF;
}

.button.switch {
  position: relative;
  display: inline-block;
  font-size: 12px;
  padding: 8px;
  background-color: rgba(0,0,0,0.1);
  color: rgba(255,255,255,0.7);
  margin-bottom: 4px;  
}

.button.switch.active {
  background-color: rgba(255,255,255,0.4);
  color: #fff;
}

.switch-icon {
  width: 24px;
  height: 24px;
}

.switches {
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  margin-top: 80px;
}

.overlay-loader .loader-icon.spinning-cog {
  -webkit-animation: spinning-cog 1.3s infinite ease;
  -moz-animation: spinning-cog 1.3s infinite ease;
  -ms-animation: spinning-cog 1.3s infinite ease;
  -o-animation: spinning-cog 1.3s infinite ease;
  animation: spinning-cog 1.3s infinite ease;
}

@-webkit-keyframes spinning-cog {
  0% { -webkit-transform: rotate(0deg) }
  20% { -webkit-transform: rotate(-45deg) }
  100% { -webkit-transform: rotate(360deg) }
}

@-moz-keyframes spinning-cog {
  0% { -moz-transform: rotate(0deg) }
  20% { -moz-transform: rotate(-45deg) }
  100% { -moz-transform: rotate(360deg) }
}

@-o-keyframes spinning-cog {
  0% { -o-transform: rotate(0deg) }
  20% { -o-transform: rotate(-45deg) }
  100% { -o-transform: rotate(360deg) }
}

@keyframes spinning-cog {
  0% { transform: rotate(0deg) }
  20% { transform: rotate(-45deg) }
  100% { transform: rotate(360deg) }
}

@-webkit-keyframes shrinking-cog {
  0% { -webkit-transform: scale(1) }
  20% { -webkit-transform: scale(1.2) }
  100% { -webkit-transform: scale(0) }
}

@-moz-keyframes shrinking-cog {
  0% { -moz-transform: scale(1) }
  20% { -moz-transform: scale(1.2) }
  100% { -moz-transform: scale(0) }
}

@-o-keyframes shrinking-cog {
  0% { -o-transform: scale(1) }
  20% { -o-transform: scale(1.2) }
  100% { -o-transform: scale(0) }
}

@keyframes shrinking-cog {
  0% { transform: scale(1) }
  20% { transform: scale(1.2) }
  100% { transform: scale(0) }
}

.overlay-loader .loader-icon.shrinking-cog {
  -webkit-animation: shrinking-cog .3s 1 ease forwards;
  -moz-animation: shrinking-cog .3s 1 ease forwards;
  -ms-animation: shrinking-cog .3s 1 ease forwards;
  -o-animation: shrinking-cog .3s 1 ease forwards;
  animation: shrinking-cog .3s 1 ease forwards;
}

/*Downloaded from https://www.codeseek.co/pasqualevitiello/tumblr-cog-spinners-fluGx */
jQuery(document).ready(function($) {
  
  function timer() {
    
    setTimeout(endAnim, 8000);  
    $('.again').hide();
   
  }
  
  timer();
  
  function restartAnim() {
    $('.loader-icon').removeClass('shrinking-cog').addClass('spinning-cog');
    $('.loader-background').addClass('color-flip'); 
    timer();
    $('.switches').show();
    
  }
   
  function endAnim() {
    $('.loader-icon').removeClass('spinning-cog').addClass('shrinking-cog');
    $('.loader-background').removeClass('color-flip'); 
    $('.again').delay(500).fadeIn('slow');
    $('.switches').fadeOut('slow');
     
  }
  
  
  $('.again').on('click', function(e) {
    
    e.preventDefault();
    restartAnim();
   
  });
  
  $('.switch').on('click', function(e) {
      
    var trigger = $(this);
    
    if ( !trigger.hasClass('active') ) {
      
      $('#loader').find('.loader-icon').addClass('hidden').filter('[data-cog*="' +  trigger.data('trigger') + '"]').removeClass('hidden');
      
      trigger.addClass('active').siblings('.active').removeClass('active');
      
    }
    
    e.preventDefault();
      
  });

});

Comments