.square1 {
  animation: rotation_ccw 6s linear infinite;
}
.square2 {
  animation: rotation_cw 6s linear infinite;
}
@keyframes rotation_cw {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes rotation_ccw {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(-360deg); }
}
.loading {
  opacity: 0;
  margin-top: 30px;
  position: relative;
}
.loading > div {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

.eye {
  animation: eye_active 4s step-end infinite;
}

@keyframes eye_active {
  0% { background-position: 0 52px; }
  33% { background-position: 0 104px; }
  66% { background-position: 0 156px; }
}

#node1 {
  animation-delay: 0.1s;
}

#node2 {
  animation-delay: 0.2s;
}

#node3 {
  animation-delay: 0.3s;
}

#node4 {
  animation-delay: 0.4s;
}

#node5 {
  animation-delay: 0.5s;
}

#node6 {
  animation-delay: 0.6s;
}

#node7 {
  animation-delay: 0.7s;
}

#node8 {
  animation-delay: 0.8s;
}