.astrolink__loading {
  width: 100px;
  height: 100px;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  transition: opacity ease-out 0.3s;
  animation: rotate infinite linear 9s;
}
.astrolink__loading--opacity {
  opacity: 0;
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.astrolink__loading-content {
  top: 10px;
  position: absolute;
}
.astrolink__loading-content--one {
  top: 29px;
  left: 24px;
  transform: rotate(320deg);
  animation: elastic infinite ease-out 2.5s;
}
@keyframes elastic {
  0% {
    top: 29px;
    left: 24px;
  }
  50% {
    top: 40px;
    left: 32px;
  }
  100% {
    top: 29px;
    left: 24px;
  }
}
.astrolink__loading-content--one .astrolink__ball {
  width: 13px;
  height: 13px;
}
.astrolink__loading-content--two {
  top: 33px;
  left: 45px;
  animation: elastic-two infinite ease-out 2.5s;
}
@keyframes elastic-two {
  0% {
    top: 33px;
  }
  50% {
    top: 28px;
  }
  100% {
    top: 33px;
  }
}
.astrolink__loading-content--two .astrolink__ball {
  width: 10px;
  height: 10px;
}
.astrolink__loading-content--two .astrolink__elastic {
  width: 2px;
  left: 4px;
  top: 6px;
}
.astrolink__loading-content--three {
  top: 25px;
  right: 32px;
  transform: rotate(45deg);
  animation: elastic-three infinite ease-out 2.5s;
}
@keyframes elastic-three {
  0% {
    top: 25px;
    right: 32px;
  }
  50% {
    top: 32px;
    right: 41px;
  }
  100% {
    top: 25px;
    right: 32px;
  }
}
.astrolink__loading-content--three .astrolink__ball {
  width: 12px;
  height: 12px;
}
.astrolink__loading-content--four {
  top: 46px;
  right: 23px;
  transform: rotate(94deg);
  animation: elastic-four infinite ease-out 2.5s;
}
@keyframes elastic-four {
  0% {
    right: 23px;
  }
  35% {
    right: 13px;
  }
  60% {
    right: 23px;
  }
  75% {
    top: 47px;
    right: 30px;
  }
  100% {
    right: 23px;
  }
}
.astrolink__loading-content--four .astrolink__ball {
  width: 14px;
  height: 14px;
}
.astrolink__loading-content--five {
  bottom: 20px;
  right: 46px;
  transform: rotate(145deg);
  animation: elastic-five infinite ease-out 2.5s;
}
@keyframes elastic-five {
  0% {
    right: 46px;
    bottom: 20px;
  }
  10% {
    right: 44px;
    bottom: 18px;
  }
  75% {
    right: 49px;
    bottom: 34px;
  }
  100% {
    right: 46px;
    bottom: 20px;
  }
}
.astrolink__loading-content--five .astrolink__ball {
  width: 13px;
  height: 13px;
}
.astrolink__loading-content--six {
  left: 55px;
  bottom: 27px;
  transform: rotate(186deg);
  animation: elastic-six infinite ease-out 2.5s;
}
@keyframes elastic-six {
  0% {
    left: 55px;
    bottom: 27px;
  }
  30% {
    bottom: 23px;
  }
  75% {
    bottom: 33px;
  }
  100% {
    bottom: 27px;
  }
}
.astrolink__loading-content--six .astrolink__ball {
  width: 10px;
  height: 10px;
}
.astrolink__loading-content--six .astrolink__elastic {
  width: 2px;
  left: 4px;
  top: 6px;
}
.astrolink__loading-content--seven {
  left: 59px;
  bottom: 14px;
  transform: rotate(222deg);
  animation: elastic-seven infinite ease-out 2.5s;
}
@keyframes elastic-seven {
  0% {
    left: 59px;
    bottom: 14px;
  }
  50% {
    left: 64px;
    bottom: 24px;
  }
  85% {
    left: 57px;
    bottom: 11px;
  }
  100% {
    left: 59px;
    bottom: 14px;
  }
}
.astrolink__loading-content--seven .astrolink__ball {
  width: 12px;
  height: 12px;
}
.astrolink__loading-content--eigth {
  top: 56px;
  left: 24px;
  transform: rotate(270deg);
  animation: elastic-eigth infinite ease-out 2.5s;
}
@keyframes elastic-eigth {
  0% {
    left: 24px;
  }
  50% {
    left: 12px;
  }
  90% {
    left: 31px;
  }
  100% {
    left: 24px;
  }
}
.astrolink__ball {
  z-index: 2;
  width: 14px;
  height: 14px;
  position: absolute;
  border-radius: 100%;
  background-color: #c2c2c2;
}
.astrolink__ball--center {
  width: 20px;
  height: 20px;
}
.astrolink__elastic {
  left: 5px;
  top: 10px;
  width: 3px;
  z-index: 1;
  height: 21px;
  position: absolute;
  background-color: #c2c2c2;
}