Rounded loader - black&white

index.html

<div class="container">
  <div class="item-1">
  </div>
  <div class="item-2">
  </div>
  <p class="text">LOADING</p>
</div>

Rounded-loader---black&white.markdown

Rounded loader - black&white

A Pen by Emmanuel Franc on CodePen.

License.

style.scss

@import "compass/css3";
@import "compass/css3";

$vendor: '', '-webkit-', '-moz-', '-ms-', '-o-';

@mixin animation-timing-function($name) {
    @each $prefix in $vendor {
        #{$prefix}animation-timing-function: $name;
    }
}

@mixin animation-name($name) {
    @each $prefix in $vendor {
        #{$prefix}animation-name: $name;
    }
}

@mixin animation-fill-mode($mode) {
    @each $prefix in $vendor {
        #{$prefix}animation-fill-mode: $mode;
    }
}

@mixin animation-duration($duration) {
    @each $prefix in $vendor {
        #{$prefix}animation-duration: $duration;
    }
}

@mixin animation-iteration-count($value) {
  @each $prefix in $vendor {
    #{$prefix}animation-iteration-count: $value;
  }
}

@mixin animation-delay($value) {
    @each $prefix in $vendor {
        #{$prefix}animation-delay: $value;
    }
}

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

$paint-color:
  #000000,
  #ffffff,
  #414141;

body {
  background: nth($paint-color, 3);
}

.container {
  width: 400px;
  height: 200px;
  margin: 50px auto 0 auto;
  
  @for $i from 1 through 2 {
    .item-#{$i} {
      background: nth($paint-color, $i);
    }
  }
}

.item-1, .item-2 {
  width: 200px;
  height: 200px;
  float: left;
  @include border-radius(360px);
} 

.text {
  position: absolute;
  width: 200px;
  height: 200px;
  margin: 0;
  z-index: 2;
  font-size: 28px;
  font-family: Impact, Arial, sans-serif;
  text-align: center;
  line-height: 200px;
  color: nth($paint-color, 1);
}

.item-1, .text {
  @include animation-name(slide-1);
  @include animation-duration(3s);
  @include animation-iteration-count(infinite);
  @include animation-timing-function(linear);
}
.item-2 {
 @include animation-name(slide-2);
 @include animation-duration(3s);
 @include animation-iteration-count(infinite);
 @include animation-timing-function(linear);
}

@include keyframes (slide-1) {
  0%, 100% {
    @include transform(translateX(0px));
  }
  50% {
    @include transform(translateX(200px));
  }
}
@include keyframes (slide-2) {
  0%, 100% {
    @include transform(translateX(0px));
  }
  50% {
    @include transform(translateX(-200px));
  }
}