<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

@import "compass/css3";

$boxSize : 50px;
$boxMargin: $boxSize / 3;
$boxColor1 :#CE9FFC; 
$boxColor2 :#7367F0;
$boxBorderRadius: 50%;

$delay: .1s;

@mixin centerFlex{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content:center;
}

body{
  @include centerFlex;
  height: 97vh;
}

.boxes{
  margin: auto;
  width: 250px;
  @include centerFlex;
  flex-wrap: wrap;
  .box{
    margin: $boxMargin;
    width: $boxSize;
    height: $boxSize;
    border-radius: $boxBorderRadius;
    background:linear-gradient(130deg, $boxColor1 0%, $boxColor2 100%);
    box-shadow : 0px 0px 10px rgba(0,0,0,0.3);

    @include animation(pulse 1s linear infinite alternate);
    &:nth-child(1) {
      @include animation-delay(1 * $delay);
    }
    &:nth-child(2) {
      @include animation-delay(1 * $delay);
    }
    &:nth-child(3) {
      @include animation-delay(2 * $delay);
    }
    &:nth-child(4) {
      @include animation-delay(3 * $delay);
    }
    &:nth-child(5) {
      @include animation-delay(4 * $delay);
    }
    &:nth-child(6) {
      @include animation-delay(5 * $delay);
    }
    &:nth-child(7) {
      @include animation-delay(6 * $delay);
    }
    &:nth-child(8) {
      @include animation-delay(7 * $delay);
    }
    &:nth-child(9) {
      @include animation-delay(8 * $delay);
    }
  }

}

@keyframes pulse {
  from, 
  40% {
    opacity: 0; 
  }
  50%
  {
    opacity: 0.5;
  }
  80%,
  to {
    opacity: 1;
  }
}

@media screen and (max-width: 300px) {
  .box{
    width:  30px !important;
    height: 30px !important;;
  }
}