<div class="barbell">
  <div class="plates lPlates"></div>
  <div class="bar"></div>
  <div class="plates rPlates"></div>
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@keyframes lLoading {
  0% {
    transform: translate(-500%, -50%);
  }
  25%, 100% {
    transform: translate(0%, -50%);
  }
}

@keyframes rLoading {
  0% {
    transform: translate(500%, -50%);
  }
  25%, 100% {
    transform: translate(0%, -50%);
  }
}

@keyframes lBeforeLoading {
  0%, 25% {
    transform: translate(-500%, -50%);
  }
  50%, 100% {
    transform: translate(0%, -50%);
  }
}

@keyframes lAfterLoading {
  0%, 50% {
    transform: translate(-500%, -50%);
  }
  75%, 100% {
    transform: translate(0%, -50%);
  }
}

@keyframes rBeforeLoading {
  0%, 25% {
    transform: translate(500%, -50%);
  }
  50%, 100% {
    transform: translate(0%, -50%);
  }
}

@keyframes rAfterLoading {
  0%, 50% {
    transform: translate(500%, -50%);
  }
  75%, 100% {
    transform: translate(0%, -50%);
  }
}


.barbell {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  overflow: hidden;
  
  .plates {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 50%;
    background: black;
    border-radius: 5px;
    
    &.lPlates {
      left: 15px;
      right: auto;
      animation: lLoading 2s infinite;
      
      &:before {
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: -5px;
        width: 5px;
        height: 75%;
        background: black;
        animation: lBeforeLoading 2s infinite;
        border-radius: 5px;
      }
      
      &:after {
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: -10px;
        width: 5px;
        height: 50%;
        background: black;
        animation: lAfterLoading 2s infinite;
        border-radius: 5px;
      }
    }
    
    &.rPlates {
      right: 15px;
      left: auto;
      animation: rLoading 2s infinite;
      
      &:before {
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: -5px;
        width: 5px;
        height: 75%;
        background: black;
        animation: rBeforeLoading 2s infinite;
        border-radius: 5px;
      }
      
      &:after {
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: -10px;
        width: 5px;
        height: 50%;
        background: black;
        animation: rAfterLoading 2s infinite;
        border-radius: 5px;
      }
    }
  }
  
  .bar {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 5px;
    background: black;
  }
}