CSS loading - rotating spinner http://www.sassmeister.com/gist/a7bc0d83a11388b4331cd5cedcadb671

SassMeister-input-HTML.html

<div class="mask-overlay">
  <div class="animate-tipper">
    <div class="fa fa-spinner">y</div>
  </div>
  <div class="animate-spinner">
    <div class="fa fa-spinner">x</div>
  </div>
  <div class="h35">
    Uploading...
  </div>
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----


//http://joshbroton.com/quick-fix-sass-mixins-for-css-keyframe-animations/
@mixin animation($animate...) {
  $max: length($animate);
  $animations: '';

  @for $i from 1 through $max {
    $animations: #{$animations + nth($animate, $i)};

    @if $i < $max {
      $animations: #{$animations + ", "};
    }
  }
  -webkit-animation: $animations;
  -moz-animation:    $animations;
  -o-animation:      $animations;
  animation:         $animations;
}

@mixin keyframes($animationName) {
  @-webkit-keyframes #{$animationName} {
    @content;
  }
  @-moz-keyframes #{$animationName} {
    @content;
  }
  @-o-keyframes #{$animationName} {
    @content;
  }
  @keyframes #{$animationName} {
    @content;
  }
}

@include keyframes(tipper) {
  0%  { transform: rotate(0deg); }
  7%  { transform: rotate(5deg); }
  45% { transform: rotate(-75deg); }
  90% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

@include keyframes(spinner) {
  0%  { transform: rotate(0deg); }
  100%  { transform: rotate(360deg); }
}
.mask-overlay {
  background: rgba(0,0,0,0.7);
  color: #fff;
  height: 100%;
  left: 0;
  padding: 5em;
  position: fixed;
  top: 0;
  text-align: center;
  width: 100%;
  z-index: 100;
}
.animate-tipper {
  font-size: 50px;
  @include animation('tipper 3s ease-out 0s infinite');
}
.animate-spinner {
  font-size: 50px;
  @include animation('spinner 3s ease-out 0s infinite');
}

SassMeister-output.css

@-webkit-keyframes tipper {
  0% {
    transform: rotate(0deg);
  }
  7% {
    transform: rotate(5deg);
  }
  45% {
    transform: rotate(-75deg);
  }
  90% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@-moz-keyframes tipper {
  0% {
    transform: rotate(0deg);
  }
  7% {
    transform: rotate(5deg);
  }
  45% {
    transform: rotate(-75deg);
  }
  90% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@-o-keyframes tipper {
  0% {
    transform: rotate(0deg);
  }
  7% {
    transform: rotate(5deg);
  }
  45% {
    transform: rotate(-75deg);
  }
  90% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes tipper {
  0% {
    transform: rotate(0deg);
  }
  7% {
    transform: rotate(5deg);
  }
  45% {
    transform: rotate(-75deg);
  }
  90% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@-webkit-keyframes spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-moz-keyframes spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-o-keyframes spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.mask-overlay {
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  height: 100%;
  left: 0;
  padding: 5em;
  position: fixed;
  top: 0;
  text-align: center;
  width: 100%;
  z-index: 100;
}

.animate-tipper {
  font-size: 50px;
  -webkit-animation: tipper 3s ease-out 0s infinite;
  -moz-animation: tipper 3s ease-out 0s infinite;
  -o-animation: tipper 3s ease-out 0s infinite;
  animation: tipper 3s ease-out 0s infinite;
}

.animate-spinner {
  font-size: 50px;
  -webkit-animation: spinner 3s ease-out 0s infinite;
  -moz-animation: spinner 3s ease-out 0s infinite;
  -o-animation: spinner 3s ease-out 0s infinite;
  animation: spinner 3s ease-out 0s infinite;
}

SassMeister-rendered.html

<div class="mask-overlay">
  <div class="animate-tipper">
    <div class="fa fa-spinner">y</div>
  </div>
  <div class="animate-spinner">
    <div class="fa fa-spinner">x</div>
  </div>
  <div class="h35">
    Uploading...
  </div>
</div>