A Pen by Robert Blecha.

index.html

<figure>
  <div class="dotwrap dotwrap1"><div class="dot dot1"></div></div>
  <div class="dotwrap dotwrap2"><div class="dot dot2"></div></div>
  <div class="dotwrap dotwrap3"><div class="dot dot3"></div></div>
  <div class="dotwrap dotwrap4"><div class="dot dot4"></div></div>
  <div class="dotwrap dotwrap5"><div class="dot dot5"></div></div>
</figure>

Projectisimo.com-loader.markdown

Projectisimo.com loader

A Pen by Robert Blecha on CodePen.

License.

style.css

body { background: #222; }
figure { 
  position: absolute;
  margin: auto;
  top: 0; bottom: 0; left: 0; right: 0;
  width: 3em; height: 3em;
  animation: rotate 2.4s linear infinite;
}
.dotwrap {
  width:1.2em; 
  height:3em;
  position: absolute;  
  left:50%; 
  margin-left:-0.6em; 
  top:50%; 
  margin-top:-1.4em
}
.dotwrap1 {transform: rotate(0deg);}
.dotwrap2 {transform: rotate(72deg);}
.dotwrap3 {transform: rotate(144deg);}
.dotwrap4 {transform: rotate(216deg);}
.dotwrap5 {transform: rotate(288deg);}
.dot {
  width: 1.2em; 
  height: 1.2em;
  border-radius: 100%;
  transition: all 1s ease;
}
.dotwrap { animation: smallbig 2.4s linear infinite; }
.dot1 { background: #ff657f; animation: dots 2.4s linear infinite; }
.dot2 { background: #ff9231; animation: dots 2.4s linear infinite; }
.dot3 { background: #a3d869; animation: dots 2.4s linear infinite; }
.dot4 { background: #fbda64; animation: dots 2.4s linear infinite; }
.dot5 { background: #5bb4e5; animation: dots 2.4s linear infinite; }
@keyframes rotate {
  0% { transform: rotate( 0 ); }
  100%{ transform: rotate(360deg); }
}
@keyframes smallbig {
  50% {  height:1.2em;  margin-top:-0.6em;}
}
@keyframes dots {
  50% { opacity: .1; }
  100%{ opacity: .9; }
}