<div class="loader">
   
        <svg version="1.1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-466.4 259.6 280.2 47.3" enable-background="new -466.4 259.6 280.2 47.3" xml:space="preserve">
            <polyline class="animation"   points="-465.4,281 -436,281 -418.9,281 -423.9,281 -363.2,281 -355.2,269 -345.2,303 -335.2,263 -325.2,291 -319.2,281 -187.2,281 "></polyline>
            
        </svg>
    </div>

@mixin translate($x, $y) {
  -webkit-transform: translate($x, $y);
      -ms-transform: translate($x, $y); 
       -o-transform: translate($x, $y);
          transform: translate($x, $y);
}
@mixin keyframes($animationName) {
  @-webkit-keyframes #{$animationName} {
    @content;
  }
  @-moz-keyframes #{$animationName} {
    @content;
  }
  @-o-keyframes #{$animationName} {
    @content;
  }
  @keyframes #{$animationName} {
    @content;
  }
}

@mixin animate($name, $duration, $iteration, $direction) {
  -webkit-animation-duration: $duration;
     -moz-animation-duration: $duration;
       -o-animation-duration: $duration;
          animation-duration: $duration;

  -webkit-animation-iteration-count: $iteration;
     -moz-animation-iteration-count: $iteration;
       -o-animation-iteration-count: $iteration;
          animation-iteration-count: $iteration;

  -webkit-animation-name: $name;
     -moz-animation-name: $name;
       -o-animation-name: $name;
          animation-name: $name;

  -webkit-animation-direction: $direction;
     -moz-animation-direction: $direction;
       -o-animation-direction: $direction;
          animation-direction: $direction;
}

@include keyframes(pulsate) {
  0% { background-color: #b3bbdf; }
25% { background-color: #b3bbdf; }
50% { background-color: #b3bbdf; }
75% { background-color: #b3bbdf; }
100% { background-color: #b3bbdf; }
}
@include keyframes(move) {
   to {
     stroke-dashoffset: -1200;
  }
}
@include keyframes(fade) {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
@mixin pulsate {
  @include animate(pulsate, 80s, infinite, normal);
}


.loader {
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999999;
  @include pulsate;
  svg {
    left: 0;
    position: absolute;
    top: 50%;
    @include translate(0,-50%);
    
  }
}
.animation { 
            fill: none; 
            stroke: #ffffff; 
            stroke-linecap: square; 
            stroke-miterlimit: 10; 
            stroke-width: 0.5px; 
            opacity: 1; 
            stroke-dasharray: 5000; 
            -webkit-animation: move 5s linear forwards infinite, fade 5s linear infinite; 
            animation: move 5s linear forwards infinite, fade 5s linear infinite; 
        }