CSS3 Activity spinner

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-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-transform: rotate(72deg); }
.loader .circle:nth-child(3) {  -webkit-transform: rotate(144deg); }
.loader .circle:nth-child(4) {  -webkit-transform: rotate(216deg); }
.loader .circle:nth-child(5) {  -webkit-transform: rotate(288deg); }

@-webkit-keyframes orbit { 
  0%   { -webkit-transform:rotate(0);
         -webkit-animation-timing-function: linear; } 
    
  50%   { -webkit-transform:rotate(180deg);
         -webkit-animation-timing-function: linear; }
}

</style>