Generated by SassMeister.com.

SassMeister-input-HTML.html

<span class="spinner"></span>

SassMeister-input.scss

// ----
// Sass (v3.4.6)
// Compass (v1.0.1)
// ----

@import "compass";

@include keyframes(spin) {
  from { 
    background: rgba(rebeccapurple, .5); 
  }
  50% {
    background: rgba(rebeccapurple, .75); 
  }
  to { 
    background: rgba(rebeccapurple, .5); 
    transform: rotate(1turn);
  }
}

.spinner {
  @include animation(spin 1s linear infinite both);
  background-clip: padding-box;
  border: .375rem solid rgba(rebeccapurple, .5);
  border-radius: 100%;
  border-top-color: rgba(rebeccapurple, .75);
  display: inline-block;
  height: 1rem;
  width: 1rem;
}

SassMeister-output.css

@-moz-keyframes spin {
  from {
    background: rgba(102, 51, 153, 0.5);
  }
  50% {
    background: rgba(102, 51, 153, 0.75);
  }
  to {
    background: rgba(102, 51, 153, 0.5);
    transform: rotate(1turn);
  }
}
@-webkit-keyframes spin {
  from {
    background: rgba(102, 51, 153, 0.5);
  }
  50% {
    background: rgba(102, 51, 153, 0.75);
  }
  to {
    background: rgba(102, 51, 153, 0.5);
    transform: rotate(1turn);
  }
}
@keyframes spin {
  from {
    background: rgba(102, 51, 153, 0.5);
  }
  50% {
    background: rgba(102, 51, 153, 0.75);
  }
  to {
    background: rgba(102, 51, 153, 0.5);
    transform: rotate(1turn);
  }
}
.spinner {
  -moz-animation: spin 1s linear infinite both;
  -webkit-animation: spin 1s linear infinite both;
  animation: spin 1s linear infinite both;
  background-clip: padding-box;
  border: 0.375rem solid rgba(102, 51, 153, 0.5);
  border-radius: 100%;
  border-top-color: rgba(102, 51, 153, 0.75);
  display: inline-block;
  height: 1rem;
  width: 1rem;
}

SassMeister-rendered.html

<span class="spinner"></span>