<main class="container">
  <div class="spinner__container spinner__effect--1">
    <ul class="spinner">
      <li class="spinner__dot"></li>
      <li class="spinner__dot"></li>
      <li class="spinner__dot"></li>
    </ul>
  </div>
  <div class="spinner__container spinner__effect--2">
    <ul class="spinner">
      <li class="spinner__square"></li>
      <li class="spinner__square"></li>
      <li class="spinner__square"></li>
    </ul>
  </div>
  <div class="spinner__container spinner__effect--3">
    <ul class="spinner">
      <li class="spinner__dot"></li>
      <li class="spinner__dot"></li>
      <li class="spinner__dot"></li>
    </ul>
  </div>
  <div class="spinner__container spinner__effect--4">
    <ul class="spinner">
      <li class="spinner__circle"></li>
      <li class="spinner__circle"></li>
      <li class="spinner__circle"></li>
      <li class="spinner__circle"></li>
      <li class="spinner__circle"></li>
    </ul>
  </div>
  <div class="spinner__container spinner__effect--5">
    <ul class="spinner">
      <li class="spinner__square"></li>
      <li class="spinner__square"></li>
      <li class="spinner__square"></li>
      <li class="spinner__square"></li>
    </ul>
  </div>
  <div class="spinner__container spinner__effect--6">
    <ul class="spinner">
      <li class="spinner__square"></li>
      <li class="spinner__square"></li>
      <li class="spinner__square"></li>
      <li class="spinner__square"></li>
    </ul>
  </div>
  <div class="spinner__container spinner__effect--7">
    <ul class="spinner">
      <li class="spinner__square"></li>
      <li class="spinner__square"></li>
      <li class="spinner__square"></li>
      <li class="spinner__square"></li>
      <li class="spinner__square"></li>
      <li class="spinner__square"></li>
      <li class="spinner__square"></li>
      <li class="spinner__square"></li>
      <li class="spinner__square"></li>
    </ul>
  </div>
  <div class="spinner__container spinner__effect--8">
    <ul class="spinner">
      <li class="spinner__square"></li>
      <li class="spinner__square"></li>
      <li class="spinner__square"></li>
      <li class="spinner__square"></li>
      <li class="spinner__square"></li>
      <li class="spinner__square"></li>
      <li class="spinner__square"></li>
      <li class="spinner__square"></li>
      <li class="spinner__square"></li>
    </ul>
  </div>
</main>

// Colors
$gradient--start: #34e89e;
$gradient--end: #0f3443;
$border--color: #fff;
$bg--color: #fff;

// Reset
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}


// Styles
body {
  min-height: 100vh;
  background: linear-gradient($gradient--start 0%, $gradient--end 100%);
}

.container {
  position: absolute;
  top: calc(50% - 175px);
  left: calc(50% - 450px);
  display: flex;
  width: 900px;
  flex-wrap: wrap;
  border: 1px solid $border--color;
  .spinner__container {
    display: flex;
    width: 25%;
    height: 175px;
    align-items: center;
    justify-content: center;
    padding: 30px;
    border: 1px solid $border--color;
  }
  .spinner__dot {
    width: 15px;
    height: 15px;
    margin: 0 10px;
    border-radius: 100%;
  }
  .spinner__square {
    width: 10px;
    height: 10px;
  }


  /* ---- Spinner Effect 1 ---- */
  @keyframes spinner-effect-1 {
    0% {transform: scale(0);}
    50% {transform: scale(1);}
    100% {transform: scale(0);}
  }

  @mixin effect-1__dot($child: 1) {
    &:nth-child(#{$child}) {
      animation-delay: calc(.3s * #{$child});
    }
  }

  .spinner__effect--1 {
    .spinner {
      display: flex;
      justify-content: center;
      .spinner__dot {
        background: $bg--color;
        transform: scale(0);
        animation: spinner-effect-1 1.2s ease-in-out infinite;
        @include effect-1__dot();
        @include effect-1__dot(2);
        @include effect-1__dot(3);
      }
    }
  }

  /* ---- Spinner Effect 2 ---- */
  @keyframes spinner-effect-2 {
    0% {
      transform: rotate(45deg) scale(0);
      left: 100%;
    }
    50% {
      transform: rotate(45deg) scale(1);
      left: 50%;
    }
    100% {
      transform: rotate(45deg) scale(0);
      left: 0;
    }
  }

  @mixin effect-2__square($child: 1) {
    &:nth-child(#{$child}) {
      animation-delay: calc(2.5s / 3 * #{$child});
    }
  }

  .spinner__effect--2 {
    .spinner {
      position: relative;
      width: 90px;
      height: 15px;
      margin: 0 auto;
      .spinner__square {
        position: absolute;
        left: 100%;
        width: 15px;
        height: 15px;
        background: $bg--color;
        transform: rotate(45deg) scale(0);
        animation: spinner-effect-2 2.5s linear infinite;
        @include effect-2__square();
        @include effect-2__square(2);
        @include effect-2__square(3);
      }
    }
  }

  /* ---- Spinner Effect 3 ---- */
  @keyframes spinner-effect-3 {
    0% {border-radius: 100%;}
    50% {border-radius: 0%;}
    100% {border-radius: 100%;}
  }

  @mixin effect-3__dot($child: 1) {
    &:nth-child(#{$child}) {
      animation-delay: calc(.3s * #{$child});
    }
  }

  .spinner__effect--3 {
    .spinner {
      display: flex;
      justify-content: center;
      .spinner__dot {
        border: 3px solid $border--color;
        animation: spinner-effect-3 1.2s ease-in-out infinite;
        @include effect-3__dot();
        @include effect-3__dot(2);
        @include effect-3__dot(3);
      }
    }
  }

  /* ---- Spinner Effect 4 ---- */
  @keyframes spinner__effect--4 {
    50% {transform: rotate(360deg) scale(.7);}
  }

  @mixin effect-4__circle($child: 1, $index: 0, $delay: 4) {
    &:nth-child(#{$child}) {
      top: calc(6.5px * #{$index});
      left: calc(6.5px * #{$index});
      width: calc(65px - 65px * 0.2 * #{$index});
      height: calc(65px - 65px * 0.2 * #{$index});
      animation-delay: calc(.2s * #{$index});
    }
  }

  .spinner__effect--4 {
    .spinner {
      position: relative;
      width: 65px;
      height: 65px;
      .spinner__circle {
        position: absolute;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: $border--color;
        border-left-color: $border--color;
        animation: spinner__effect--4 2s infinite;
        @include effect-4__circle();
        @include effect-4__circle(2, 1, 3);
        @include effect-4__circle(3, 2, 2);
        @include effect-4__circle(4, 3, 1);
        @include effect-4__circle(5, 4, 0);
      }
    }
  }

  /* ---- Spinner Effect 5 ---- */
  @mixin effect-5__keyframes($child: 1, $transform: translate(-125%,-125%) scale(1.5)) {
    @keyframes spinner__effect--5-child-#{$child} {
      50% {transform: $transform;}
    }
  }

  @mixin effect-5__square($child: 1, $delay: 0) {
    &:nth-child(#{$child}) {
      animation-name: spinner__effect--5-child-#{$child};
      animation-delay: $delay;
    }
  }

  @include effect-5__keyframes();
  @include effect-5__keyframes(2, translate(125%,-125%) scale(1.5));
  @include effect-5__keyframes(3, translate(-125%,125%) scale(1.5));
  @include effect-5__keyframes(4, translate(125%,125%) scale(1.5));

  .spinner__effect--5 {
    .spinner {
      position: relative;
      display: flex;
      width: calc(25px * 2);
      height: calc(25px * 2);
      justify-content: center;
      align-items: center;
      margin: 0 auto;
      .spinner__square {
        position: absolute;
        border: 2px solid $border--color;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        @include effect-5__square();
        @include effect-5__square(2, .5s);
        @include effect-5__square(3, .5s);
        @include effect-5__square(4);
      }
    }
  }

  /* ---- Spinner Effect 6 ---- */
  @mixin effect-6__keyframes($child: 1, $transform: translate(-150%,-150%) scale(2)) {
    @keyframes spinner__effect--6-child-#{$child} {
      50% {transform: $transform;}
    }
  }

  @mixin effect-6__square($child: 1) {
    &:nth-child(#{$child}) {
      animation-name: spinner__effect--6-child-#{$child};
    }
  }

  @keyframes spinner__effect--6-container {
    50% {transform: rotate(90deg);}
    100% {transform: rotate(180deg);}
  }
  @include effect-6__keyframes();
  @include effect-6__keyframes(2, translate(150%,-150%) scale(2));
  @include effect-6__keyframes(3, translate(-150%,150%) scale(2));
  @include effect-6__keyframes(4, translate(150%,150%) scale(2));

  .spinner__effect--6 {
    .spinner {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      animation: spinner__effect--6-container 1.25s infinite;
      .spinner__square {
        position: absolute;
        border: 2px solid $border--color;
        animation-duration: 1.25s;
        animation-iteration-count: infinite;
        @include effect-6__square();
        @include effect-6__square(2);
        @include effect-6__square(3);
        @include effect-6__square(4);
      }
    }
  }

  /* ---- Spinner Effect 7 ---- */
  @keyframes spinner__effect--7 {
    0% {
      opacity: 0;
      top: -5px;
    }
    5% {
      opacity: 1;
      top: 0;
    }
    50.9% {
      opacity: 1;
      top: 0;
    }
    55.9% {
      opacity: 0;
      top: 5px;
    }
  }

  @mixin effect-7__square($child: 1, $delay: 6) {
    &:nth-child(#{$child}) {
      animation-delay: calc(.3s * #{$delay});
    }
  }

  .spinner__effect--7 {
    .spinner {
      display: flex;
      width: calc(16px * 3);
      flex-wrap: wrap;
      .spinner__square {
        opacity: 0;
        position: relative;
        top: -5px;
        margin: 2.5px;
        background: $bg--color;
        animation: spinner__effect--7 6s infinite;
        @include effect-7__square();
        @include effect-7__square(2, 7);
        @include effect-7__square(3, 8);
        @include effect-7__square(4, 3);
        @include effect-7__square(5, 4);
        @include effect-7__square(6, 5);
        @include effect-7__square(7, 0);
        @include effect-7__square(8, 1);
        @include effect-7__square(9, 2);
      }
    }
  }

  /* ---- Spinner Effect 8 ---- */
  @mixin effect-8__keyframes($child: 1, $transform: translate(-325%, -325%)) {
    @keyframes spinner__effect--8-child-#{$child} {
      50% {transform: $transform;}
    }
  }

  @mixin effect-8__square($child: 1, $delay: calc(.1s * #{$child})) {
    &:nth-child(#{$child}) {
      animation-name: spinner__effect--8-child-#{$child};
      animation-delay: $delay;
    }
  }

  @include effect-8__keyframes();
  @include effect-8__keyframes(2, translate(0, -325%));
  @include effect-8__keyframes(3, translate(325%, -325%));
  @include effect-8__keyframes(4, translate(325%, 0));
  @include effect-8__keyframes(5, translate(325%, 325%));
  @include effect-8__keyframes(6, translate(0, 325%));
  @include effect-8__keyframes(7, translate(-325%, 325%));
  @include effect-8__keyframes(8, translate(-325%, 0));
  @include effect-8__keyframes(9, scale(2));

  .spinner__effect--8 {
    .spinner {
      position: relative;
      transform: rotate(45deg);
      .spinner__square {
        position: absolute;
        background: $bg--color;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        @include effect-8__square();
        @include effect-8__square(2);
        @include effect-8__square(3);
        @include effect-8__square(4);
        @include effect-8__square(5);
        @include effect-8__square(6);
        @include effect-8__square(7);
        @include effect-8__square(8);
        @include effect-8__square(9, 1.25s);
      }
    }
  }
}

// Pure CSS