#anim {
  position: relative;
  cursor: pointer;
  overflow: hidden;
}

#text {
  position: relative;
}


.wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -12px;
  margin-left: -80px;
  overflow: hidden;
  height: 50px;
  width: 200px;
}

.loader {
  margin: 0 auto;
  width: 32px;
  height: 32px;
  position: relative;
}

.cube1,
.cube2,
.cube3,
.cube4,
.cube5 {
  background-color: #000;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 20px;
  left: 0;

  -webkit-animation: cubemove 2s infinite ease-in-out;
  animation: cubemove 2s infinite ease-in-out;
}

.cube2 {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}

.cube3 {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}

.cube4 {
  -webkit-animation-delay: -1.5s;
  animation-delay: -1.5s;
}
.cube5 {
  -webkit-animation-delay: -2s;
  animation-delay: -2s;
}

@-webkit-keyframes cubemove {
  0% { -webkit-transform: translateX(-120px);}
  50% { -webkit-transform: translateX(0px) rotate(180deg) scale(2.2); background: #00AAFF; }
  100% { -webkit-transform: translateX(120px);}
}

@keyframes cubemove {
  0% {
    -webkit-transform: translateX(-120px);
    transform: translateX(-120px);
  }
  50% {
    -webkit-transform: translateX(0px) rotate(180deg) scale(2.2); background: #00AAFF;
    transform: translateX(0px) rotate(180deg) scale(2.2); background: #00AAFF;
  }
  100% {
    -webkit-transform: translateX(120px);
    transform: translateX(120px); background: #ffffff;
  }
}