.spinner {
  width:30px;
  height:30px;
  transform: rotate(45deg);
  animation: rotateit 1.5s ease infinite;
  display:none;
}
.beam {
  width:10px;
  height:10px;
  border-radius:10px;
  position:absolute;
}
.r {
  background-color:#33A2CC;
}
.b {
  background-color:#CEF00F;
}
.r1 {
  transform: rotate(90deg);
  left:10px;
  top:0px;
  animation: move1r 1.5s ease infinite;
}
.r3 {
  top:10px;
  animation: move2 1.5s ease infinite;
}
.b1 {
  transform: rotate(90deg);
  left:10px;
  top:20px;
  animation: move1b 1.5s ease infinite;
}
.b3 {
  top:10px;
  left:20px;
  animation: move2 1.5s ease infinite;
}

@-webkit-keyframes rotateit {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(90deg);
  }
}

@keyframes rotateit {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(90deg);
  }
}
@keyframes move1r {
  0% {
    top:0px;
    transform: rotate(0deg);
  }
  45% {
    top:20px;
  }
  50% {
    transform: rotate(0deg);
  }
  100% {
    top:20px;
    transform: rotate(-90deg);
  }
}
@keyframes move2 {
  50% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-90deg);
  }
}
@keyframes move1b {
  0% {
    top:20px;
    transform: rotate(0deg);
  }
  45% {
    top:0px;
  }
  50% {
    transform: rotate(0deg);
  }
  100% {
    top:0px;
    transform: rotate(-90deg);
  }
}