Generated by SassMeister.com.

Blend Mode Loading Spinner.html

<div class="loading">
  <span class="bar bar-1"></span>
  <span class="bar bar-2"></span>
  <span class="bar bar-3"></span>
  <span class="bar bar-4"></span>
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----

.loading {
  width: 60px;
  height: 60px; 
  position: relative;
  margin: 100px auto;
  background-color: white;
  animation: spin 2s linear infinite;
  animation-direction: reverse;
}
.bar {
  display: block;
  position: absolute;
  height: 10px;
  width: 20px;
  background-color: white;
  mix-blend-mode: exclusion;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  @for $i from 1 through 4 {
    &.bar-#{$i} {
      animation: spin+$i 2s ease-in-out infinite;
      animation-fill-mode: forwards;
    }
  }
  &.bar-1 {
    top: 10px;
    left: 20px;
  }
  &.bar-2 {
    right: 10px;
    top: 20px;
    width: 10px;
    height: 20px;
  }
  &.bar-3 {
    bottom: 10px;
    left: 20px;
  }
  &.bar-4 {
    left: 10px;
    top: 20px;
    width: 10px;
    height: 20px;
  }
}

@keyframes spin { 
  100% { transform: rotate(90deg); }
}

@keyframes spin1 { 
  25% { transform: rotate(90deg) translate(15px, -5px) scaleX(1);}
  100% { transform: rotate(90deg) translate(15px, -5px) scaleX(2); }
}
@keyframes spin2 { 
  15% { transform: rotate(0deg) translate(0px) scaleY(1); }
  50% { transform: rotate(90deg) translate(5px, 15px) scaleY(1); }
  100% { transform: rotate(90deg) translate(5px, 15px) scaleY(2); }
}
@keyframes spin3 { 
  40% { transform: rotate(0deg) translate(0px) scaleX(1); }
  75% { transform: rotate(90deg) translate(-15px, 5px) scaleX(1); }
  100% { transform: rotate(90deg) translate(-15px, 5px) scaleX(2); }
}
@keyframes spin4 { 
  65% { transform: rotate(0deg) translate(0px) scaleY(1);  }
  100% { transform: rotate(90deg) translate(-5px, -15px) scaleY(2);  }
}

SassMeister-output.css

.loading {
  width: 60px;
  height: 60px;
  position: relative;
  margin: 100px auto;
  background-color: white;
  animation: spin 2s linear infinite;
  animation-direction: reverse;
}

.bar {
  display: block;
  position: absolute;
  height: 10px;
  width: 20px;
  background-color: white;
  mix-blend-mode: exclusion;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}
.bar.bar-1 {
  animation: spin1 2s ease-in-out infinite;
  animation-fill-mode: forwards;
}
.bar.bar-2 {
  animation: spin2 2s ease-in-out infinite;
  animation-fill-mode: forwards;
}
.bar.bar-3 {
  animation: spin3 2s ease-in-out infinite;
  animation-fill-mode: forwards;
}
.bar.bar-4 {
  animation: spin4 2s ease-in-out infinite;
  animation-fill-mode: forwards;
}
.bar.bar-1 {
  top: 10px;
  left: 20px;
}
.bar.bar-2 {
  right: 10px;
  top: 20px;
  width: 10px;
  height: 20px;
}
.bar.bar-3 {
  bottom: 10px;
  left: 20px;
}
.bar.bar-4 {
  left: 10px;
  top: 20px;
  width: 10px;
  height: 20px;
}

@keyframes spin {
  100% {
    transform: rotate(90deg);
  }
}
@keyframes spin1 {
  25% {
    transform: rotate(90deg) translate(15px, -5px) scaleX(1);
  }
  100% {
    transform: rotate(90deg) translate(15px, -5px) scaleX(2);
  }
}
@keyframes spin2 {
  15% {
    transform: rotate(0deg) translate(0px) scaleY(1);
  }
  50% {
    transform: rotate(90deg) translate(5px, 15px) scaleY(1);
  }
  100% {
    transform: rotate(90deg) translate(5px, 15px) scaleY(2);
  }
}
@keyframes spin3 {
  40% {
    transform: rotate(0deg) translate(0px) scaleX(1);
  }
  75% {
    transform: rotate(90deg) translate(-15px, 5px) scaleX(1);
  }
  100% {
    transform: rotate(90deg) translate(-15px, 5px) scaleX(2);
  }
}
@keyframes spin4 {
  65% {
    transform: rotate(0deg) translate(0px) scaleY(1);
  }
  100% {
    transform: rotate(90deg) translate(-5px, -15px) scaleY(2);
  }
}

SassMeister-rendered.html

<div class="loading">
  <span class="bar bar-1"></span>
  <span class="bar bar-2"></span>
  <span class="bar bar-3"></span>
  <span class="bar bar-4"></span>
</div>