CSS3 Windows 8 Activity Spinner

README.md

This activity spinner is an adaptation from this Codepen, and is commonly seen in Windows 8.

index.html

<div class="loader">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>

<style>

.loader {
  position: relative;
  padding-top: 100px;
  width: 40px;
  margin: auto;
}

.loader .circle {
  position: absolute;
  width: 38px;
  height: 38px;
  -webkit-transform: rotate(225deg);
  transform: rotate(225deg);
  -webkit-animation: orbit 2s infinite;
  animation: orbit 5.5s infinite;
}

.loader .circle:after {
  content: '';
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 5px;
  background: #286090; /* Pick a color */
}

.loader .circle:nth-child(2) {  -webkit-animation-delay: 240ms; }
.loader .circle:nth-child(3) {  -webkit-animation-delay: 480ms; }
.loader .circle:nth-child(4) {  -webkit-animation-delay: 720ms; }
.loader .circle:nth-child(5) {  -webkit-animation-delay: 960ms; }

@-webkit-keyframes orbit { 
  0%   { -webkit-transform:rotate(225deg);
         -webkit-animation-timing-function: ease-in-out; } 
    
  15%   { -webkit-transform:rotate(345deg);
         -webkit-animation-timing-function: linear; }
    
  85%   { -webkit-transform:rotate(455deg);
          -webkit-animation-timing-function: ease-in-out; }
    
  100% { -webkit-transform:rotate(585deg); } 
}

@keyframes orbit { 
  0%   { transform:rotate(225deg);
         animation-timing-function: ease-in-out; } 
    
  15%   { transform:rotate(345deg);
         animation-timing-function: linear; }
    
  85%   { transform:rotate(455deg);
          animation-timing-function: ease-in-out; }

  100% { transform:rotate(585deg); opacity: 0; } 
}
</style>