<div id="loader" class="wraploader">
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  <svg id="wrapcircle" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="71.333px" height="12.667px" viewBox="0 0 71.333 12.667" enable-background="new 0 0 71.333 12.667" xml:space="preserve">
  <circle fill="#FFFFFF" cx="5" cy="6.727" r="5" id="firstcircle"></circle>
  <circle fill="#FFFFFF" cx="20" cy="6.487" r="5" id="secondcircle"></circle>
  <circle fill="#FFFFFF" cx="35" cy="6.487" r="5" id="thirthcircle"></circle>
  <circle fill="#FFFFFF" cx="50" cy="6.487" r="5" id="forthcircle"></circle>
  <circle fill="#FFFFFF" cx="65" cy="6.487" r="5" id="fifthcircle"></circle>
  </svg>
</div>
//Variable
$primary_color: #8ba753;

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

@mixin animation($atr...){
  -webkit-animation: $atr;
     -moz-animation: $atr;
      -ms-animation: $atr;
       -o-animation: $atr;
          animation: $atr;
}

@mixin box-sizing($value){
  -webkit-box-sizing: $value;
     -moz-box-sizing: $value;
      -ms-box-sizing: $value;
       -o-box-sizing: $value;
          box-sizing: $value;
}

// keyframes
@include keyframes(circle-move1){
  0%{cx: 5;opacity: 0;} 25%{transform:scale(1.2);}50%{cx: 105;opacity: 1;}95%{cx: 235;}100%{opacity: 0;}
}
@include keyframes(circle-move2) {
  0%{cx: 20;opacity: 0;} 25%{transform:scale(1.2);}50%{cx: 120;opacity: 1;}95%{cx: 250;}100%{opacity: 0;}
}
@include keyframes(circle-move3) {
  0%{cx: 35;opacity: 0;} 25%{transform:scale(1.2);}50%{cx: 135;opacity: 1;}95%{cx: 265;}100%{opacity: 0;}
}
@include keyframes(circle-move4) {
  0%{cx: 50;opacity: 0;} 25%{transform:scale(1.2);}50%{cx: 150;opacity: 1;}95%{cx: 280;}100%{opacity: 0;}
}
@include keyframes(circle-move5) {
  0%{cx: 65;opacity: 0;} 25%{transform:scale(1.2);}50%{cx: 165;opacity: 1;}95%{cx: 295;}100%{opacity: 0;}
}

//style
html,body{
  background-color: $primary_color;
  @include box-sizing(border-box);
  position: relative;
  height: 100%;
}

.wraploader{
  bottom: 0;
  height: 50px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 320px;
  #wrapcircle{     
    padding: 20px 15px 40px;
    width: 100%;
    @include box-sizing(border-box);
    circle{
      opacity: 0;
    }
    
    #fifthcircle {
      @include animation(circle-move5 4s ease-in-out 0s infinite);
    }
    #forthcircle {
      @include animation(circle-move4 4s ease-in-out 0.2s infinite);
    }
    #thirthcircle {
      @include animation(circle-move3 4s ease-in-out 0.4s infinite);
    }
    #secondcircle {
      @include animation(circle-move2 4s ease-in-out 0.6s infinite);
    }
    #firstcircle {
      @include animation(circle-move1 4s ease-in-out 0.8s infinite);
    }
  }
}
View Compiled
// $(window).load(function(){
//   $('#loader').hide();
//   $('body').css('background-color','transparent');
// });
Rerun