$speed: 2s;


/* ------------------------- */


*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; height: 100%; }

body {
  display: flex;
  
  background-color: #e7e6dd;
}

.loading {
  display: block;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 100px;
  height: 100px;
  
  border-radius: 50%;
  
  span {
    display: block;
    position: absolute;
    width: 50%;
    height: 50%;
    
    &:nth-child(1) {
      top: 0;
      left: 0;
      
      background-color: rgba( #4285f4, .75 );
      
      animation: move1 $speed linear 0 infinite;
    }
    &:nth-child(2) {
      top: 0;
      right: 0;
      
      background-color: rgba( #db4437, .75 );
      
      animation: move2 $speed linear 0 infinite;
    }
    &:nth-child(3) {
      bottom: 0;
      left: 0;
      
      background-color: rgba( #f4b400, .75 );
      
      animation: move3 $speed linear 0 infinite;
    }
    &:nth-child(4) {
      bottom: 0;
      right: 0;
      
      background-color: rgba( #0f9d58, .75 );
      
      animation: move4 $speed linear 0 infinite;
    }
  }
}

@keyframes move1 {
  0%   { transform: translate( 0 ); z-index: 10; }
  25%  { transform: translate( 100%, 0 ); }
  50%  { transform: translate( 100%, 100% ); }
  75%  { transform: translate( 0, 100% ); z-index: 0; }
  100% { transform: translate( 0 ); }
}
@keyframes move2 {
  0%   { transform: translate( 0 ); }
  25%  { transform: translate( 0, 100% ); }
  50%  { transform: translate( -100%, 100% ); z-index: 0; }
  75%  { transform: translate( -100%, 0 ); z-index: 10; }
  100% { transform: translate( 0 ); }
}
@keyframes move3 {
  0%   { transform: translate( 0 ); }
  25%  { transform: translate( 0, -100% ); z-index: 10; }
  50%  { transform: translate( 100%, -100% ); }
  75%  { transform: translate( 100%, 0 ); }
  100% { transform: translate( 0 ); z-index: 0; }
}
@keyframes move4 {
  0%   { transform: translate( 0 ); }
  25%  { transform: translate( -100%, 0 ); z-index: 0; }
  50%  { transform: translate( -100%, -100% ); z-index: 10; }
  75%  { transform: translate( 0, -100% ); }
  100% { transform: translate( 0 ); }
}