#bar1 {
  width: 15%;
  height: 20px;
  top:20%;
  left:30%;
}
#bar2 {
  width: 15%;
  height: 20px;
  top:20%;
  left:55%;
  animation-direction: reverse;
}

#bar3 {
  width: 20px;
  height: 40%;
  top:20%;
  left:45%;
}

#bar4 {
  width: 20px;
  height: 40%;
  top:20%;
  left:55%;
}

.bar {
  border: 1px solid #2980b9;
  border-radius: 3px;
  z-index: -2;
  position: absolute;
  background-image: 
    repeating-linear-gradient(
      -45deg,
      #2980b9,
      #2980b9 11px,
      #eee 10px,
      #eee 20px /* determines size */
    );
  background-size: 28px 28px;
  animation: move .5s linear infinite;
}

@keyframes move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 28px 0;
  }
}