$color:skyblue;

div{
  width:20px;
  height:20px; 
  border-radius:50%;
  margin:100px auto;
  background:$color;
  //background:none;
  /*can't hide the center circle :/ */
  animation:rot 2.4s ease-in-out 0 infinite;
}

@keyframes rot{
  0%{
    transform:rotate(0) scale(1.1);
    box-shadow:
      -20px -20px 0 0 $color,
      20px 20px 0 0 $color,
      -20px 20px 0 0 $color,
      20px -20px 0 0 $color
  }
  25%{
    transform:rotate(90deg) skew(2deg, 2deg);
    box-shadow:
      -10px -10px 0 10px $color,
      10px 10px 0 10px $color,
      -10px -10px 0 10px $color,
      10px 10px 0 10px $color
  }
  50%{
    transform:rotate(180deg);
    box-shadow:
      0 0 0 20px $color,
      0 0 0 20px $color,
      0 0 0 20px $color,
      0 0 0 20px $color
  }
  75%{
   transform:rotate(270deg) skew(2deg, 2deg);
   box-shadow:
      -10px -10px 0 10px $color,
      10px 10px 0 10px $color,
      -10px -10px 0 10px $color,
      10px 10px 0 10px $color;
  }
  100%{
    transform:rotate(360deg) scale(1.1);
    box-shadow:
      -20px -20px 0 0 $color,
      20px 20px 0 0 $color,
      -20px 20px 0 0 $color,
      20px -20px 0 0 $color;
  }
}

a{
  display:block;
  text-align:center;
  font-size:12px;
  color:#000;
  &:hover,
  &:visited{
    color:skyblue;
  }
}