.faded {
  opacity: 0;
  visibility: hidden;
  transition: .6s opacity ease-in-out;

  &--in {
    visibility: visible;
    opacity: 1;
  }
}

.is-loading {

  &::before {
    position: absolute;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
    content: "";
    display: block;
    height: 27px;
    width: 27px;
    border-radius: 100%;
    border: 3px solid #eee;
    border-top-color: #1428aa;
    animation: loadingSpin 2s infinite;
  }
}

@keyframes loadingSpin {
  0% {
    transform: translateY(-50%) rotate(0);
  }

  100% {
    transform: translateY(-50%) rotate(1080deg);
  }
}