@-webkit-keyframes scale {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1; }

  45% {
    -webkit-transform: scale(0.1);
            transform: scale(0.1);
    opacity: 0.7; }

  80% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1; } }
@keyframes scale {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1; }

  45% {
    -webkit-transform: scale(0.1);
            transform: scale(0.1);
    opacity: 0.7; }

  80% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1; } }

.ball-pulse > div:nth-child(0) {
  -webkit-animation: scale 0.75s -0.36s infinite cubic-bezier(.2, .68, .18, 1.08);
          animation: scale 0.75s -0.36s infinite cubic-bezier(.2, .68, .18, 1.08); }
.ball-pulse > div:nth-child(1) {
  -webkit-animation: scale 0.75s -0.24s infinite cubic-bezier(.2, .68, .18, 1.08);
          animation: scale 0.75s -0.24s infinite cubic-bezier(.2, .68, .18, 1.08); }
.ball-pulse > div:nth-child(2) {
  -webkit-animation: scale 0.75s -0.12s infinite cubic-bezier(.2, .68, .18, 1.08);
          animation: scale 0.75s -0.12s infinite cubic-bezier(.2, .68, .18, 1.08); }
.ball-pulse > div:nth-child(3) {
  -webkit-animation: scale 0.75s 0s infinite cubic-bezier(.2, .68, .18, 1.08);
          animation: scale 0.75s 0s infinite cubic-bezier(.2, .68, .18, 1.08); }
.ball-pulse > div {
  background-color: #fff;
  width: 25px;
  height: 25px;
  border-radius: 100%;
  margin: 2px;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  display: inline-block; }

@-webkit-keyframes ball-pulse-sync {
  33% {
    -webkit-transform: translateY(10px);
            transform: translateY(10px); }

  66% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px); }

  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0); } }

@keyframes ball-pulse-sync {
  33% {
    -webkit-transform: translateY(10px);
            transform: translateY(10px); }

  66% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px); }

  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0); } }
.loader {
    display: block;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #eb5057;
    z-index: 100000;  
}            

.ball-pulse {
    top: 50%;
    right: 50%;
    position: absolute;
    width: 100px;
    height: 30px;
    margin-right: -50px;
}



$dot-color: #79C3CD;
$dot-size: 35px;
$circle-size: 70px;
$animation-time: 4s;

$color-yellow: #FBD301;
$color-red: #FF3270;
$color-blue: #208BF1;
$color-green: #AFE102;

$colors: ($color-red, $color-blue, $color-green, $color-yellow);

body {
  background: #ffffff;
}

.dots {
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  outline: 1px solid red;

  filter: url(#goo);
}

.dot {
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  top: 0;

  &:before {
    content: '';
    width: $dot-size;
    height: $dot-size;
    border-radius: 50px;
    background: $color-yellow;
    position: absolute;
    left: 50%;
    transform: translateY(0);
    margin-left: -($dot-size/2);
    margin-top: -($dot-size/2);
  }


  @keyframes dot-move {
    0% {
      transform: translateY(0);
    }

    18%, 22% {
      transform: translateY(-($circle-size));
    }

    40%, 100% {
      transform: translateY(0);
    }
  }

  @keyframes dot-colors {
    @for $i from 0 to 4 {
      #{$i*25%} {
        background-color: nth($colors, ($i+3)%4+1);
      }
    }

    100% {
      background-color: nth($colors, 4);
    }
  }

  &:nth-child(5):before {
    z-index: 100;
    width: $dot-size * 1.3;
    height: $dot-size * 1.3;
    margin-left: -($dot-size * .65);
    margin-top: -($dot-size * .65);
    animation: dot-colors $animation-time ease infinite;
  }

  @for $i from 0 to 4 {
    @keyframes dot-rotate-#{$i + 1} {
      0% {
        transform: rotate(#{($i+1)*270deg - 375deg});
      }

      100% {
        transform: rotate(#{($i+1)*270deg + 0deg});
      }
    }

    &:nth-child(#{$i + 1}) {
      animation: dot-rotate-#{$i + 1} $animation-time #{$i * $animation-time / 4} linear infinite;

      &:before {
        background-color: nth($colors, $i+1);
        animation: dot-move $animation-time #{$i * $animation-time/4} ease infinite;
      }
    }
  }
}