Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="timer">
    
</div>

SassMeister-input.scss

// ----
// libsass (v0.7.0)
// ----

@import "compass";
@import "compass/css3";
@import "stipe/manifest";

// Modified from http://css-spinners.com/#/spinner/timer/

@mixin keyframes($name) {
  @-webkit-keyframes $name { @content }
  @-moz-keyframes $name { @content }
  @keyframes $name { @content }
}

@mixin animation($value) {
  @include experimental(animation, $value, -webkit, -moz, -ms, official);
}

@mixin animation-timing-function($value) {
  @include experimental(animation-timing-function, $value, -webkit, -moz, -ms, official);
}

$timer-size: em(16);
$timer-speed: 1000ms;
$timer-color: #888;
$timer-border-width: em(2);

@include keyframes(timer) {
  0%   { @include rotateZ(0deg); }
  100% { @include rotateZ(360deg); }
}

/* :not(:required) hides this rule from IE9 and below */
.timer:not(:required) {
  @include border-radius(50%);

  border: $timer-border-width solid $timer-color;
  display: inline-block;
  overflow: hidden;
  position: relative;
  text-indent: -9999px;
  width: $timer-size;
  height: $timer-size;

  &::before, &::after {
    @include animation(timer $timer-speed infinite linear);
    @include transform-origin($timer-size / 2, $timer-size / 2);
    @include border-radius($timer-size / 16);

    background: $timer-color;
    content: '';
    display: block;
    position: absolute;
    width: ($timer-size / 9);
    height: (2 * $timer-size / 5);
    left: ($timer-size / 2) - ($timer-size / 16) - $timer-border-width;
    top: ($timer-size / 2) - ($timer-size / 16) - $timer-border-width;
  }

  &::after {
    @include animation(timer (12 * $timer-speed) infinite linear);

    height: ($timer-size / 3);
  }
}

SassMeister-output.css

source string:1: error: file to import not found or unreadable: "compass"

SassMeister-rendered.html

<div class="timer">
    
</div>