<div class="diamond-loader"></div>

$diamond-size: (60px / 2); //divide by 2
$diamond-color: #2f99f2;

// Adjust Colors
$diamond-color1: darken($diamond-color,12);
$diamond-color2: darken($diamond-color,8);
$diamond-color3: darken($diamond-color,4);
$diamond-color4: $diamond-color;

.diamond-loader {
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  margin: auto;
  
  transform: rotate(45deg);
  width: 0px;
  height: 0px;
  border: 0px solid $diamond-color4;
  border-width: $diamond-size;

  animation: loader 2s linear infinite;
}

@keyframes loader {
  0% {
    border-color: $diamond-color4 $diamond-color1 $diamond-color2 $diamond-color3;
  }
  25% {
    border-color: $diamond-color3 $diamond-color4 $diamond-color1 $diamond-color2;
  }
  50% {
    border-color: $diamond-color2 $diamond-color3 $diamond-color4 $diamond-color1;
  }
  75% {
    border-color: $diamond-color1 $diamond-color2 $diamond-color3 $diamond-color4;
  }
  100% {
    border-color: $diamond-color4 $diamond-color1 $diamond-color2 $diamond-color3;
  }
}

// For Demo
$background: #ffffff;
$background-accent: #eee;

body {
  background-size: 40px 20px;
  background-color: $background-accent;
  background-image: 
  radial-gradient(circle at 100% 150%, $background-accent 24%, $background 25%, $background 28%, $background-accent 29%, $background-accent 36%, $background 36%, $background 40%, transparent 40%, transparent),
  radial-gradient(circle at 0    150%, $background-accent 24%, $background 25%, $background 28%, $background-accent 29%, $background-accent 36%, $background 36%, $background 40%, transparent 40%, transparent),
  radial-gradient(circle at 50%  100%, $background 10%, $background-accent 11%, $background-accent 23%, $background 24%, $background 30%, $background-accent 31%, $background-accent 43%, $background 44%, $background 50%, $background-accent 51%, $background-accent 63%, $background 64%, $background 71%, transparent 71%, transparent),
  radial-gradient(circle at 100% 50%, $background 5%, $background-accent 6%, $background-accent 15%, $background 16%, $background 20%, $background-accent 21%, $background-accent 30%, $background 31%, $background 35%, $background-accent 36%, $background-accent 45%, $background 46%, $background 49%, transparent 50%, transparent),
  radial-gradient(circle at 0    50%, $background 5%, $background-accent 6%, $background-accent 15%, $background 16%, $background 20%, $background-accent 21%, $background-accent 30%, $background 31%, $background 35%, $background-accent 36%, $background-accent 45%, $background 46%, $background 49%, transparent 50%, transparent);
}