<div class="wrapper">
	<div class="data-loader">
  <div class="data-loader__top">
    <div class="data-loader__hanger">
      <svg xmlns="http://www.w3.org/2000/svg" width="8" height="15" viewBox="0 0 8 15">
  <g fill="none" fill-rule="evenodd">
    <path class="stroke-color" stroke-width="2" d="M4,0 L4,15"/>
    <rect width="8" height="4" y="11" class="fill-border-color" rx="2"/>
    <rect width="6" height="4" x="1" y="1" class="fill-border-color" rx="2"/>
  </g>
</svg>

    </div>
    <div class="data-loader__blade data-loader__blade--left">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17">
  <polyline fill="none" class="stroke-color" stroke-width="2" points="726.895 157 714 163.08 719.731 171.897" transform="translate(-712 -156)" stroke-linecap="round"/>
</svg>

    </div>
    <div class="data-loader__blade data-loader__blade--right">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17">
  <polyline fill="none" class="stroke-color" stroke-width="2" points="736.895 157 724 163.08 729.731 171.897" transform="matrix(-1 0 0 1 737.895 -156)" stroke-linecap="round"/>
</svg>

    </div>
    <div class="data-loader__drop">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
  <path class="object-color" fill-rule="evenodd" d="M97.3918741,2.39187412 L104.940864,2.39187412 L104.940864,2.39187412 C106.045433,2.39187412 106.940864,3.28730462 106.940864,4.39187412 L106.940864,11.940864 L106.940864,11.940864 C106.940864,13.0454335 106.045433,13.940864 104.940864,13.940864 L97.3918741,13.940864 L97.3918741,13.940864 C96.2873046,13.940864 95.3918741,13.0454335 95.3918741,11.940864 L95.3918741,4.39187412 L95.3918741,4.39187412 C95.3918741,3.28730462 96.2873046,2.39187412 97.3918741,2.39187412 Z" transform="rotate(45 54.666 -104.095)"/>
</svg>

    </div>
  </div>
  <div class="data-loader__bottom">
    <div class="data-loader__objects">
      <div class="data-loader__object data-loader__object--first"></div>
      <div class="data-loader__object"></div>
      <div class="data-loader__object"></div>
      <div class="data-loader__object data-loader__object--change"></div>
      <div class="data-loader__object data-loader__object--active"></div>
      <div class="data-loader__object data-loader__object--active data-loader__object--last"></div>
    </div>
    <div class="data-loader__border"></div>
  </div>
</div>
</div>

* {
  box-sizing: border-box;
}

$data-loader-width: 312px;
$data-loader-height: 100px;
$border-color: black;
$object-color: #ff429d;
$data-loader-gap: 42px;
$duration: 2s;
$animation: $duration linear both infinite;
$bladeAnimation: $duration steps(1) both infinite;
$hangerAnimation: $duration linear both infinite;
$dropAnimation: $duration linear both infinite;
$objectAnimation: $duration linear both infinite;

body {
	min-height: $data-loader-height;
}

.wrapper {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.data-loader {
  width: $data-loader-width;
  height: $data-loader-height;
  position: relative;
  border-top: 2px solid $border-color;
  overflow: hidden;
}

.data-loader__top {
  position: absolute;
  width: 50px;
  height: 40px;
  left: -50px;
  animation: hangerMovesToTheRight $hangerAnimation;
}

.data-loader__hanger {
  top: -2px;
  left: 21px;
  position: absolute;
}

.data-loader__blade {
  position: absolute;
  top: 11px;
  
  &--left {
    left: 10px;
    animation: bladeLeft $bladeAnimation;
  }
  
  &--right {
    right: 10px;
    animation: bladeRight $bladeAnimation;
  }
}

.data-loader__drop {
  position: absolute;
  top: 23px;
  left: 17px;
  animation: objectDrops $dropAnimation;
}

.data-loader__bottom {
  position: absolute;
  bottom: -2px;
  left: $data-loader-gap/-1;
  width: 100%;
  white-space: nowrap;
  text-align: center;
  z-index: 1;
  padding-bottom: 8px;
  padding-left: 14 + $data-loader-gap;
  animation: bottomPartMovesToTheRight $animation;
}

.data-loader__object {
  margin-right: 20px;
  float: left;
  width: 23px;
  height: 23px;
  border: 2px solid $border-color;
  border-radius: 2px;
  background-color: #fff;
  
  &--first {
    opacity: 0;
    animation: newObjectAppears $animation;
  }
  
  &--last {
    margin-right: 0;
    animation: lastObjectDissapears $animation;
  }
  
  &--change {
    animation: objectChangesColor $objectAnimation;
  }
  
  &--active {
    border-color: $object-color;
  }
}

.data-loader__border {
    border-bottom: 2px dashed $border-color;
    height: 2px;
    position: absolute;
    bottom: 2px;
    left: -4px;
    width: $data-loader-width + $data-loader-gap + 10;
}

.object-color {
	fill: $object-color;
}

.stroke-color {
	stroke: $border-color;
}

.fill-border-color {
	fill: $border-color;
}

@keyframes newObjectAppears {

    0%, 50% {
        opacity: 0;
    }
    
    100% {
        opacity: 1;
    }
}

@keyframes lastObjectDissapears {
    0% {
        opacity: 1;
    }

    50%, 100% {
        opacity: 0;
    }
}

@keyframes bottomPartMovesToTheRight {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX($data-loader-gap);
    }
}

@keyframes objectDrops {
  0%, 50% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
  
  60% {
    transform: translate(-10px, 48px) rotate(70deg);
    opacity: 1;
  }
  61%, 100% {
    opacity: 0;
    transform: translate(-10px, 48px) rotate(70deg);
  }
}

@keyframes objectChangesColor {
  0%, 55% {
    border-color: $border-color;
  }
  65%, 100% {
    border-color: $object-color;
  }
}

@keyframes bladeLeft {
  0% {
    transform: rotate(0deg) translateX(0);
  }
  50% {
    transform: rotate(10deg) translate(-4px);
  }
  60% {
    transform: rotate(0deg) translateX(0);
  }
}

@keyframes bladeRight {
  0% {
    transform: rotate(0deg) translateX(0);
  }
  50% {
    transform: rotate(-10deg) translate(4px);
  }
  60% {
    transform: rotate(0deg) translateX(0);
  }
}

@keyframes hangerMovesToTheRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX($data-loader-width + 50);
  }
}