@keyframes spinning {
  0%, 100% {
    /* initial state 0 */
    border-left: 100px solid darkgrey;
    border-top: 100px solid lightgrey;
    border-right: 100px solid grey;
    border-bottom: 100px solid black;
  }
  20% {
    /* state 1 */
    border-left: 100px solid darkgrey;
    border-top: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 100px solid transparent;
  }
  40% {
    /* state 2 */
    border-left: 100px solid transparent;
    border-top: 100px solid lightgrey;
    border-right: 100px solid transparent;
    border-bottom: 100px solid transparent;
  }
  60% {
    /* state 3 */
    border-left: 100px solid transparent;
    border-top: 100px solid transparent;
    border-right: 100px solid grey;
    border-bottom: 100px solid transparent;
  }
  80% {
    /* state 4 */
    border-left: 100px solid transparent;
    border-top: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 100px solid black;
  }
}