Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.5)
// Compass (v1.0.0.alpha.18)
// Bourbon (v3.2.0.beta.1.a)
// ----


@import "bourbon/bourbon";

body {
  background: #222222;
}

@include keyframes(spinner1) {
  from {
    @include transform(rotate(0deg));
  }
  to {
    @include transform(rotate(360deg));
  }
}


@include keyframes(spinner2) {
  from {
    @include transform(rotate(0deg));
  }
  to {
    @include transform(rotate(-360deg));
  }
}


.spinner {
  position: fixed;
  width: 34px;
  height: 34px;
  top: 50%;
  left: 50%;
  margin-left: -17px;
  margin-top: -17px;
  &:after, &:before {
    position: fixed;
    content: "";
    border: 1px solid #ef1334;
    width: 19px;
    height: 19px;
  }
  &:after {
    @include animation(spinner1 2.5s linear infinite);
  }
  &:before {
    width: 23px;
    height: 23px;
    margin-left: -2px;
    margin-top: -2px;
    @include animation(spinner2 2.5s linear infinite);
  }
}

SassMeister-output.css

body { background: #222222; }

@-webkit-keyframes spinner1 { from { -webkit-transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); } }
@-moz-keyframes spinner1 { from { -moz-transform: rotate(0deg); }
  to { -moz-transform: rotate(360deg); } }
@keyframes spinner1 { from { transform: rotate(0deg); }
  to { transform: rotate(360deg); } }
@-webkit-keyframes spinner2 { from { -webkit-transform: rotate(0deg); }
  to { -webkit-transform: rotate(-360deg); } }
@-moz-keyframes spinner2 { from { -moz-transform: rotate(0deg); }
  to { -moz-transform: rotate(-360deg); } }
@keyframes spinner2 { from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); } }
.spinner { position: fixed; width: 34px; height: 34px; top: 50%; left: 50%; margin-left: -17px; margin-top: -17px; }
.spinner:after, .spinner:before { position: fixed; content: ""; border: 1px solid #ef1334; width: 19px; height: 19px; }
.spinner:after { -webkit-animation: spinner1 2.5s linear infinite; -moz-animation: spinner1 2.5s linear infinite; animation: spinner1 2.5s linear infinite; }
.spinner:before { width: 23px; height: 23px; margin-left: -2px; margin-top: -2px; -webkit-animation: spinner2 2.5s linear infinite; -moz-animation: spinner2 2.5s linear infinite; animation: spinner2 2.5s linear infinite; }