.meter1 > span {
  z-index: 3;
  height:220px;
  width:20px;
  display: block;
  box-shadow: inset 5 20px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 8px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.meter1 > span:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent
  );
  z-index: 1;
  background-size: 50px 50px;
  animation: move 2.0s linear infinite;
  overflow: hidden;
}

.meter2 > span {
  z-index: 3;
  height:20px;
  width:20px;
  display: block;
  box-shadow: inset 5 20px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 8px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.meter2 > span:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent
  );
  z-index: 1;
  background-size: 50px 50px;
  animation: move2 2.0s linear infinite;
  overflow: hidden;
}



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

@keyframes move2 {
  0% {
    background-position: 50px 50px;
  }
  100% {
    background-position: 0 0;
  }
}