/* structure */

.load.gif {
  background:;
  border: 1px solid #ccc;
  box-sizing: border-box;
  margin: 50px auto 0;
  padding: 5px;
  position: relative;
  width: 100px;
  height: 100px;
}
.cube {
  background: #000;
  float: left;
  position: absolute;
  width: 25px;
  height: 25px;
}
.cube:nth-child(3n+1) {
  clear: both;
  margin-left: 0;
}
.do {
  display: none;
}

.yellow {
  background: #f6c574;
  left: 5px;
}
.blue {
  background: #00abcd;
    left: 37px;
}
.red {
  background: #fc5652;
    left: 68px;
}

.orange {
  background: #e2e8e7;
  left: 37px;
  top: 37px;
}

/* animations */
@keyframes yellow {
  0% {
    left: 5px;
  }
  12.5% {
    left: 37px;
  }
  25% {
    top: 5px;
    left: 68px;
  }
  37.5% {
    top: 37px;
    left: 68px;
  }
  50% {
    top: 68px;
    left: 68px;
  }
  62.5% {
    top: 68px;
    left: 37px;
  }
  75% {
    top: 68px;
    left: 5px;
  }
  87.5% {
    top: 37px;
  }
  100% {
    top: 5px;
  }
}
@keyframes blue {
  0% {
    left: 37px;
  }
  12.5% {
    top: 5px;
    left: 68px;
  }
  25% {
    top: 37px;
    left: 68px;
  }
  37.5% {
    top: 68px;
    left: 68px;
  }
  50% {
    top: 68px;
    left: 37px;
  }
  62.5% {
    top: 68px;
    left: 5px;
  }
  75% {
    top: 37px;
    left: 5px;
  }
  87.5% {
    top: 5px;
    left: 5px;
  }
  100% {
    left: 37px;
  }
}

@keyframes red {
  0% {
    top: 5px;
    left: 68px;
  }
  12.5% {
    top: 37px;
    left: 68px;
  }
  25% {
    top: 68px;
    left: 68px;
  }
  37.5% {
    top: 68px;
    left: 37px;
  }
  50% {
    top: 68px;
    left: 5px;
  }
  62.5% {
    top: 37px;
    left: 5px;
  }
  75% {
    top: 5px;
    left: 5px;
  }
  87.5% {
    left: 37px;
  }
  100% {
    left: 68px;
  }
}

/* animationed */
.yellow {
  animation: yellow 5s infinite;
}
.blue {
  animation: blue 5s infinite;
}
.red {
  animation: red 5s infinite;
}