Shine Preloader

by LostInDaJungle

HTML

<!-- So, first things first, create our three divs. -->
<div class="container">
	<div class="red_light light l1">&nbsp;</div>
	<div class="blue_light light l2">&nbsp;</div>
	<div class="green_light light l3">&nbsp;</div>
</div>

CSS

.container {
  margin: 300px; 
  position: relative;
  width: 64px;
  height: 66px;
}
.light {height: 32px; width: 32px; border-radius: 16px; border: 1px solid #CCC;}
.red_light {
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: #B00000 ;
}
.blue_light {
  position: absolute;
  top: 34px;
  left: 0px;
  background-color: blue;
}
.green_light {
  position: absolute;
  top: 17px;
  left: 32px;
  background-color: green;
}

.container {
  animation: spin 6s ease 0s infinite; 
  /*transform-origin: 50% 50%;*/
  -webkit-transform-origin: 50% 50%;
}
.l1 { animation: red 6s ease 0s infinite; }
.l2 { animation: l2-rise 6s ease 0s infinite; }
.l3 { animation: l3-rise 6s ease 0s infinite; }

@keyframes spin {
    0% { transform: rotate(360deg); }
    50% { transform: rotate(0deg); }
    0% { transform: rotate(360deg); }
}

@keyframes red {
  0%{ transform: translate(0px,0px); }
  25%{ transform: translate(-16px, -16px); }
  50%{ transform: translate(0px, 0px); background-color: #B00000 ;}
  100%{ transform: translate(0px, 0px); background-color: #FF0000; }
}

@keyframes l2-rise {
  0%{ transform: translate(0,0px); }
  25%{ transform: translate(-16px, 16px); }
  50%{ transform: translate(0,0px); background-color: #0000B0 ;}
  100%{ transform: translate(0,0px); background-color: #0000FF ;}
}

@keyframes l3-rise {
  0%{ transform: translate(0px, 0px); }
  25%{ transform: translate(16px, 0px); }
  50%{ transform: translate(0px, 0px); background-color: #00B000 ;}
  100%{ transform: translate(0px, 0px); background-color: #00FF00 ;}
}