$background: #fff;
$foreground: hsl(179,88%,41%);


.load2 {

  .sk-spin-circle,
  .sk-spin-circle:before,
  .sk-spin-circle:after {
    border-radius:50%;
  }

  .sk-spin-circle {
    color:$foreground;
    font-size:11px;
    text-indent:-99999em;
    margin:55px auto;
    position:relative;
    width:10em;
    height:10em;
    box-shadow: inset 0 0 0 1em;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);

    &:before,
    &:after {
      position:absolute;
      content:'';
    }

    &:before {
      width:5.2em;
      height:10.2em;
      background: $background;
      border-radius: 10.2em 0 0 10.2em;
      top:-0.1em;
      left:-0.1em;
      -webkit-transform-origin:5.1em 5.1em;
      transform-origin:5.1em 5.1em;
      -webkit-animation:load2 2s infinite ease 1.5s;
      animation:load2 2s infinite ease 1.5s;
    }

    &:after {
      width:5.2em;
      height:10.2em;
      background: $background;
      border-radius: 0 10.2em 10.2em 0;
      top:-0.1em;
      left:4.9em;
      -webkit-transform-origin:0.1em 5.1em;
      transform-origin:0.1em 5.1em;
      -webkit-animation:load2 2s infinite ease;
      animation:load2 2s infinite ease;
    }

  }

}

@mixin load2-frames() {

  0% {
    -webkit-transform:rotate(0deg);
    transform:rotate(0deg);
  }

  100% {
    -webkit-transform:rotate(360deg);
    transform:rotate(360deg);
  }

}

@-webkit-keyframes load2 {@include load2-frames;}
@keyframes load2 {@include load2-frames;}