.loading-circles {
  $size: 5px;
  $radius: 12px;
  $shallow: 56%;
  $c-basic: #505050;

  :deep(.circle-item) {
    width: $size;
    height: $size;
    animation: loading-circles linear .75s infinite;

    &:first-child {
      margin-top: -$size/2 + -$radius;
      margin-left: -$size/2;
    }

    &:nth-child(2) {
      margin-top: -$size/2 + -$radius * .73;
      margin-left: -$size/2 + $radius * .73;
    }

    &:nth-child(3) {
      margin-top: -$size/2;
      margin-left: -$size/2 + $radius;
    }

    &:nth-child(4) {
      margin-top: -$size/2 + $radius * .73;
      margin-left: -$size/2 + $radius * .73;
    }

    &:nth-child(5) {
      margin-top: -$size/2 + $radius;
      margin-left: -$size/2;
    }

    &:nth-child(6) {
      margin-top: -$size/2 + $radius * .73;
      margin-left: -$size/2 + -$radius * .73;
    }

    &:nth-child(7) {
      margin-top: -$size/2;
      margin-left: -$size/2 + -$radius;
    }

    &:last-child {
      margin-top: -$size/2 + -$radius * .73;
      margin-left: -$size/2 + -$radius * .73;
    }
  }

  @keyframes loading-circles {
    0% {
      background: lighten($c-basic, $shallow);
    }
    90% {
      background: $c-basic;
    }
    100% {
      background: lighten($c-basic, $shallow);
    }
  }
}