Generated by SassMeister.com.

SassMeister-input-HTML.html

<div style="height: 300px;">
<center style="margin-top:100px">
  
<div class="loader rspin">
  <span class="c"></span>
  <span class="d spin"><span class="e"></span></span>
  <span class="r r1"></span>
  <span class="r r2"></span>
  <span class="r r3"></span>
  <span class="r r4"></span>
</div>
  
</center>
</div>

SassMeister-input.sass

// ----
// Sass (v3.3.0.rc.3)
// Compass (v1.0.0.alpha.18)
// ----

@import "compass"
// This is a nice full CSS3 loader made with LESS

// u can custom almost everything u need with these variables just bellow
$loaderSize: 55px
$radThickness: $loaderSize / 10
$spinSpeed: 750ms
$backgroundColor: #eeeeee
$forgroundColor: #cccccc
$masksColor: pink
$middleCircleSize: 68%

$contrasted-dark-default: black
$contrasted-light-default: $masksColor
$contrasted-lightness-threshold: 40%

// but from here u'll have to understand what u'r dealing with

// mixins

=animation($params)
  -webkit-animation: $params
  -moz-animation: $params
  animation: $params

// animations
.spin
  +animation(spin $spinSpeed infinite linear)

.rspin
  +animation(rspin $spinSpeed * 3 infinite linear)

@-webkit-keyframes spin
  to
    -webkit-transform: rotate(360deg)

@-moz-keyframes spin
  to
    -moz-transform: rotate(360deg)

@-webkit-keyframes rspin
  to
    -webkit-transform: rotate(-360deg)

@-moz-keyframes rspin
  to
    -moz-transform: rotate(-360deg)


// let's style that thing
@mixin loader($bgcolor: $backgroundColor, $mask: $masksColor, $spinner: lighten($mask, 20%))
  background-color: $backgroundColor
  border-radius: 100%
  position: relative
  height: $loaderSize
  width: $loaderSize
  overflow: hidden
  .c
    position: absolute
    left: 50%
    top: 50%
    margin-top: -$middleCircleSize/2
    margin-right: 0
    margin-bottom: 0
    margin-left: -$middleCircleSize/2
    width: $middleCircleSize
    height: $middleCircleSize
    background-color: $mask
    border-radius: 100%
    z-index: 3
  .d
    position: absolute
    top: 0
    bottom: 0
    left: 0
    right: 0
    .e
      $thisWidth: $loaderSize * 0.2
      position: absolute
      top: 1%
      left: 50%
      margin-top: 0
      margin-right: 0
      margin-bottom: 0
      margin-left: -$thisWidth/2
      height: 14px
      width: $thisWidth
      //-webkit-transform:rotate(10deg) skew(20deg)
      //-moz-transform:rotate(10deg) skew(20deg)
      border-radius: 0
      background: $spinner
  .r
    z-index: 2
    position: absolute
    left: 50%
    top: -1px
    bottom: -1px
    margin-left: -$radThickness/2
    background-color: $mask
    width: $radThickness
  .r1
    -webkit-transform: rotate(0deg)
    -moz-transform: rotate(0deg)
  .r2
    -webkit-transform: rotate(45deg)
    -moz-transform: rotate(45deg)
  .r3
    -webkit-transform: rotate(90deg)
    -moz-transform: rotate(90deg)
  .r4
    -webkit-transform: rotate(135deg)
    -moz-transform: rotate(135deg)

.loader
  +loader(#666, white, #ccc)

SassMeister-output.css

.spin {
  -webkit-animation: spin 750ms infinite linear;
  -moz-animation: spin 750ms infinite linear;
  animation: spin 750ms infinite linear;
}

.rspin {
  -webkit-animation: rspin 2250ms infinite linear;
  -moz-animation: rspin 2250ms infinite linear;
  animation: rspin 2250ms infinite linear;
}

@-webkit-keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
  }
}
@-moz-keyframes spin {
  to {
    -moz-transform: rotate(360deg);
  }
}
@-webkit-keyframes rspin {
  to {
    -webkit-transform: rotate(-360deg);
  }
}
@-moz-keyframes rspin {
  to {
    -moz-transform: rotate(-360deg);
  }
}
.loader {
  background-color: #eeeeee;
  border-radius: 100%;
  position: relative;
  height: 55px;
  width: 55px;
  overflow: hidden;
}
.loader .c {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -34%;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: -34%;
  width: 68%;
  height: 68%;
  background-color: white;
  border-radius: 100%;
  z-index: 3;
}
.loader .d {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.loader .d .e {
  position: absolute;
  top: 1%;
  left: 50%;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: -5.5px;
  height: 14px;
  width: 11px;
  border-radius: 0;
  background: #cccccc;
}
.loader .r {
  z-index: 2;
  position: absolute;
  left: 50%;
  top: -1px;
  bottom: -1px;
  margin-left: -2.75px;
  background-color: white;
  width: 5.5px;
}
.loader .r1 {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
}
.loader .r2 {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
}
.loader .r3 {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
}
.loader .r4 {
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
}

SassMeister-rendered.html

<div style="height: 300px;">
<center style="margin-top:100px">
  
<div class="loader rspin">
  <span class="c"></span>
  <span class="d spin"><span class="e"></span></span>
  <span class="r r1"></span>
  <span class="r r2"></span>
  <span class="r r3"></span>
  <span class="r r4"></span>
</div>
  
</center>
</div>