.loading {
  /* голубий квадрат */
  position: relative;
  width: 100px;
  height: 100px;
  background: #0FF;

  /* крутить голубий квадрат */
  animation: 10s spin infinite;
  /* за вказаним "@keyframes spin"*/

  &::before,
  &::after {
    /* фіолетовий, білий */
    content: ""; /* для відображення */
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    /* за 5 секунд лінійно відхиляє
       проти годинникової стрілки, а
       потім ще 5 секунд за
       годинниковою стрілкою. */
    animation: 5s infinite alternate linear;
    /* alternate вказує, що по завершенню
       анімації, потрібно продовжити задом
       на перед, а потім знову з початку. */
  }
  &::before {
    /* фіолетовий квадрат */
    background: #F0F;

    /* змінює назву зі "spin" на "blur1" */
    animation-name: blur1;
  }
  &::after {
    /* білий квадрат */
    background: #FFF;

    /* змінює назву зі "spin" на "blur2" */
    animation-name: blur2;
  }
}

@keyframes spin {
  /* + за годинниковою стрілкою */
  to { transform: rotate(360deg) }
}

@keyframes blur1 {
  /* - проти годинникової стрілки */
  to { transform: rotate(-45deg) }
}
@keyframes blur2 {
  to { transform: rotate(-20deg) }
}

/* center it */
html { display: flex; height: 100%; }
body { margin: auto; background: #000; }