css only spinner

gistfile1.txt

//
// Spinner
// --------------------------------------------------

@import "variables";
@import "mixins";

.transform-mix (@deg, @delay) {
  -webkit-transform: rotate(@deg) translate(0, -142%);
  -webkit-animation-delay: @delay;
  -moz-transform: rotate(@deg) translate(0, -142%);
  -moz-animation-delay: @delay;
  -ms-transform: rotate(@deg) translate(0, -142%);
  -ms-animation-delay: @delay;
  -o-transform: rotate(@deg) translate(0, -142%);
  -o-animation-delay: @delay;
  transform: rotate(@deg) translate(0, -142%);
  animation-delay: @delay;
}

.spinner {
  display: none;
  position: fixed;
  left: 50%;
  margin-top: 50px;
  width: 20px;
  height: 30px;

  div {
    border-radius: 50px;
    width: 12%;
    height: 26%;
    background: @brand-primary;
    position: absolute;
    left: 44.5%;
    top: 37%;
    opacity: 0;
    -webkit-animation: fade 1s linear infinite;
    -moz-animation: fade 1s linear infinite;
    -ms-animation: fade 1s linear infinite;
    -o-animation: fade 1s linear infinite;
    animation: fade 1s linear infinite;
  }

  .bar1 {
    .transform-mix (0deg, 0s);
  }

  .bar2 {
    .transform-mix (30deg, -0.9167s);
  }

  .bar3 {
    .transform-mix (60deg, -0.833s);
  }

  .bar4 {
    .transform-mix (90deg, -0.75s);
  }

  .bar5 {
    .transform-mix (120deg, -0.667s);
  }

  .bar6 {
    .transform-mix (150deg, -0.5833s);
  }

  .bar7 {
    .transform-mix (180deg, -0.5s);
  }

  .bar8 {
    .transform-mix (210deg, -0.41667s);
  }

  .bar9 {
    .transform-mix (240deg, -0.333s);
  }

  .bar10 {
    .transform-mix (270deg, -0.25s);
  }

  .bar11 {
    .transform-mix (300deg, -0.1667s);
  }

  .bar12 {
    .transform-mix (330deg, -0.0833s);
  }

  @-webkit-keyframes fade {

    from {
      opacity: 1;
    }

    to {
      opacity: 0.25;
    }
  }
}
  @-moz-keyframes fade {

    from {
      opacity: 1;
    }

    to {
      opacity: 0.25;
    }
  }

  @-ms-keyframes fade {

    from {
      opacity: 1;
    }

    to {
      opacity: 0.25;
    }
  }

  @-o-keyframes fade {

    from {
      opacity: 1;
    }

    to {
      opacity: 0.25;
    }
  }

  @keyframes fade {

    from {
      opacity: 1;
    }

    to {
      opacity: 0.25;
    }
  }