Как сделать скелетон анимацию?

Не могу ни как сделать анимацию, чтобы она и поверх кружков тоже бегала

Вот ссылка на codepen

Как сделать, чтобы она бегала и по кругам?

<div class="view_port">
  <div class="polling_message">
  </div>
  <div class="polling_message">
  </div>
  <div class="polling_message">
  </div>
  <div class="polling_message">
  </div>
  <div class="polling_message">
  </div>
  <div class="polling_message">
  </div>
  <div class="polling_message">
  </div>
  <div class="polling_message">
  </div>
  <div class="cylon_eye"></div>
</div>
.polling_message {
  float: left;
    overflow: hidden;
    margin-left: 10px;
    width: 5%;
    height: 25px;
    background-color: #ccc;
    border-radius: 50%;
}
.view_port {
  background-color: black;
  height: 25px;
  width: 100%;
  overflow: hidden;
  background-image:
      linear-gradient(
        90deg, 
        rgba(lightgrey, 0) 0, 
        rgba(lightgrey, .8) 50%, 
        rgba(lightgrey, 0) 100%
      );
  background-repeat: no-repeat;
  animation: loading 1.5s infinite;
}
.cylon_eye {
  background-color: white;
  background-image: -webkit-linear-gradient(    left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
  background-image:    -moz-linear-gradient(    left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
  background-image:      -o-linear-gradient(    left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
  background-image:         linear-gradient(to right, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
  color: white;
  height: 100%;
  width: 20%;
  -webkit-animation: 4s linear 0s infinite alternate move_eye;
     -moz-animation: 4s linear 0s infinite alternate move_eye;
       -o-animation: 4s linear 0s infinite alternate move_eye;
          animation: 4s linear 0s infinite alternate move_eye;
}
@-webkit-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
   @-moz-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
     @-o-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
        @keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }