<div class="top">
  <div class="square">
    <div class="square">
      <div class="square">
        <div class="square">
          <div class="square"><div class="square">

          </div></div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="bottom">
  <div class="square">
    <div class="square">
      <div class="square">
        <div class="square">
          <div class="square"><div class="square">
          </div></div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="left">
  <div class="square">
    <div class="square">
      <div class="square">
        <div class="square">
          <div class="square"><div class="square">
          </div></div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="right">
  <div class="square">
    <div class="square">
      <div class="square">
        <div class="square">
          <div class="square"><div class="square">
          </div></div>
        </div>
      </div>
    </div>
  </div>
</div>
@dark : #354b60;
@green : #2ecc71;
@90 : 90deg;
body{
  background: @dark;
}
.square{
  width: 8px;
  height: 30px;
  background: @green;
  border-radius: 10px;
  display:block;
  /*margin:10px;*/
  -webkit-animation:turn 2.5s ease infinite;
  animation:turn 2.5s ease infinite;
}
.top{
  position: absolute;
  left: 40%;
  top: 50%;
  -webkit-transform:rotate(@90);
  transform:rotate(@90);
}
.bottom{
  position: absolute;
  left: 40%;
  top: 50%;
  -webkit-transform:rotate(-@90);
  transform:rotate(-@90);
}
.left{
  position: absolute;
  left: 40%;
  top: 50%;
}
.right{
  position: absolute;
  left: 40%;
  top: 50%;
  -webkit-transform:rotate(-@90*2);
  transform:rotate(-@90*2);
}
@-webkit-keyframes turn{
  0%{transform:translateX(0) translateY(0) rotate(0);}
  50%{transform: translateX(400%) translateY(100%) rotate(@90);}
  100%{transform: translateX(0) translateY(0) rotate(0);}
}
@keyframes turn{
  0%{transform:translateX(0) translateY(0) rotate(0);}
  70%{transform: translateX(400%) translateY(100%) rotate(@90);}
  100%{transform: translateX(0) translateY(0) rotate(0);}
}


View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.