@import 'scss/styles.scss';
.spinner-container {
  .bar-spinner {
    width: 8px;
    height: 48px;
    display: inline-block;
    position: relative;
    border-radius: 4px;
    box-sizing: border-box;
    animation: animateBarSpinner 1s linear infinite alternate;
  }

  @keyframes animateBarSpinner {
    0% {
      box-shadow:
        20px 0 $box-shadow-2,
        40px 0 $box-shadow-2,
        60px 0 $box-shadow-2,
        80px 0 $box-shadow-2,
        100px 0 $box-shadow-2;
    }
    20% {
      box-shadow:
        20px 0 $grey-4,
        40px 0 $box-shadow-2,
        60px 0 $box-shadow-2,
        80px 0 $box-shadow-2,
        100px 0 $box-shadow-2;
    }
    40% {
      box-shadow:
        20px 0 $grey-4,
        40px 0 $grey-4,
        60px 0 $box-shadow-2,
        80px 0 $box-shadow-2,
        100px 0 $box-shadow-2;
    }
    60% {
      box-shadow:
        20px 0 $grey-4,
        40px 0 $grey-4,
        60px 0 $grey-4,
        80px 0 $box-shadow-2,
        100px 0 $box-shadow-2;
    }
    80% {
      box-shadow:
        20px 0 $grey-4,
        40px 0 $grey-4,
        60px 0 $grey-4,
        80px 0 $grey-4,
        100px 0 $box-shadow-2;
    }
    100% {
      box-shadow:
        20px 0 $grey-4,
        40px 0 $grey-4,
        60px 0 $grey-4,
        80px 0 $grey-4,
        100px 0 $grey-4;
    }
  }
}