<div class="v-align">
  <h1>Swing Masking Loader</h1>
  <div class="loader">
    <aside class="loader__box loader--left">
      <span class="loader__circle"></span>
    </aside>
    <aside class="loader__box loader--right">
      <span class="loader__circle"></span>
    </aside>
  </div>
</div>
<!-- follow me template -->
<div class="made-with-love">
  Made with
  <i>♥</i> by
  <a target="_blank" href="https://codepen.io/nikhil8krishnan">Nikhil Krishnan</a>
</div>
//custom mixins
@mixin transform($transform) {
  -webkit-transform: $transform;
  -moz-transform: $transform;
  transform: $transform;
}
@mixin animation($animation) {
  -webkit-animation: $animation;
  -moz-animation: $animation;
  animation: $animation;
}
@mixin keyframes($name, $name1) {
  @-webkit-keyframes #{$name} {
    @content;
  }
  @-moz-keyframes #{$name} {
    @content;
  }
  @-ms-keyframes #{$name} {
    @content;
  }
  @keyframes #{$name} {
    @content;
  }
}
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}
@mixin box-shadow($shadow) {
  -webkit-box-shadow: $shadow;
  -moz-box-shadow: $shadow;
  box-shadow: $shadow;
}

//loader options
$loader-size: 150px;
$speed: 1.3s;

//animation
@include keyframes(leftAnim, leftAnim animation) {
  0% {
    @include transform(translateX(($loader-size/2)+22));
  }
  100% {
    @include transform(translateX(0));
  }
}
@include keyframes(rightAnim, rightAnim animation) {
  0% {
    @include transform(translateX(0));
  }
  100% {
    @include transform(translateX(-($loader-size/2)-18));
  }
}

.loader {
  width: $loader-size * 2;
  height: $loader-size;
  margin: 0 auto;
  position: relative;
  &::after {
    content: "";
    display: inline-block;
    position: absolute;
    left: 50%;
    margin-left: -1px;
    width: 2px;
    z-index: 1;
    height: $loader-size;
    border-left: 2px dotted #000;
  }
  &__box {
    position: absolute;
    top: 0;
    width: $loader-size;
    height: $loader-size;
    overflow: hidden;
    z-index: 2;
  }
  &--left {
    left: 0;
    .loader__circle {
      background-color: #fff;
      right: 10px;
      @include animation(leftAnim $speed ease-in-out alternate infinite);
    }
  }
  &--right {
    right: 0;
    .loader__circle {
      left: 10px;
      @include animation(rightAnim $speed ease-in-out alternate infinite);
    }
  }
  &__circle {
    width: $loader-size/2;
    height: $loader-size/2;
    border: solid 2px black;
    display: block;
    background-color: #000;
    @include border-radius(50%);
    position: absolute;
    top: 50%;
    margin-top: -($loader-size/2)/2;
  }
}

////page styles
@import url(https://fonts.googleapis.com/css?family=Raleway:500);
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
html,
body {
  min-height: 100%;
}

body {
  background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
  height: 100vh;
  position: relative;
}
.v-align {
  position: absolute;
  text-align: center;
  left: 0;
  width: 100%;
  max-height: 90vh;
  top: 50%;
  @include transform(translateY(-50%));
}
h1 {
  font-size: 24px;
  display: block;
  text-align: center;
  @include box-shadow(2px 2px 5px rgba(0, 0, 0, 0.1));
  @include border-radius(5px);
  color: #6a11cb;
  padding: 15px 20px;
  //long shadow
  text-shadow: rgb(225, 225, 225) 0.67062px 0.67062px 0px,
    rgb(225, 225, 225) 1.67062px 1.67062px 0px,
    rgb(229, 229, 229) 2.67062px 2.67062px 0px,
    rgb(233, 233, 233) 3.67062px 3.67062px 0px,
    rgb(237, 237, 237) 4.67062px 4.67062px 0px,
    rgb(242, 242, 242) 5.67062px 5.67062px 0px,
    rgb(246, 246, 246) 6.67062px 6.67062px 0px,
    rgb(250, 250, 250) 7.67062px 7.67062px 0px,
    rgb(255, 255, 255) 8.67062px 8.67062px 0px;
  background-color: #fff;
  display: inline-block;
  font-weight: 500;
  font-family: "Raleway", sans-serif;
  margin-bottom: 15vh;
  margin-top: -5vh;
}
//follow me template
.made-with-love {
  position: fixed;
  left: 0;
  width: 100%;
  bottom: 10px;
  text-align: center;
  font-size: 10px;
  z-index: 9999;
  font-family: arial;
  color: #fff;
  i {
    font-style: normal;
    color: #f50057;
    font-size: 14px;
    position: relative;
    top: 2px;
  }
  a {
    color: #fff;
    text-decoration: none;
    &:hover {
      text-decoration: underline;
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.