JSFiddle - React, Tailwind, and code Playground

HTML

<div class="meter" style="width:250px;">
    <span style="width: 50%"><span></span></span>
</div>

CSS

.meter { 
    height: 16px;  /* Can be anything */
    position: relative;
    background: #777;
    border-radius: 25px;
}

.meter > span {
    display: block;
    height: 100%;
    border-radius: 20px 2px 2px 20px;
    background-image: -webkit-gradient(
      linear,
      left bottom,
      left top,
      color-stop(0, #FC0),
      color-stop(1, #DA0)
     );
    background-image: -moz-linear-gradient(
      center bottom,
      #FC0 37%,
      #DA0 69%
     );
    box-shadow: 
      inset 0 2px 9px  rgba(255,255,255,0.3),
      inset 0 -2px 6px rgba(0,0,0,0.4);
    position: relative;
    overflow: hidden;
}
.meter > span:after, .meter > span > span {
    content: "";
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background-image: 
       -webkit-gradient(linear, 0 0, 100% 100%, 
          color-stop(.25, rgba(255, 255, 255, .2)), 
          color-stop(.25, transparent), color-stop(.5, transparent), 
          color-stop(.5, rgba(255, 255, 255, .2)), 
          color-stop(.75, rgba(255, 255, 255, .2)), 
          color-stop(.75, transparent), to(transparent)
       );
    background-image: 
        -moz-linear-gradient(
          -45deg, 
          rgba(255, 255, 255, .2) 25%, 
          transparent 25%, 
          transparent 50%, 
          rgba(255, 255, 255, .2) 50%, 
          rgba(255, 255, 255, .2) 75%, 
          transparent 75%, 
          transparent
       );
    z-index: 1;
    -webkit-background-size: 50px 50px;
    -moz-background-size: 50px 50px;
    background-size: 50px 50px;
    -webkit-animation: move 2s linear infinite;
    -moz-animation: move 2s linear infinite;
    border-radius: 20px 2px 2px 20px;
    overflow: hidden;
}

.meter > span:after {
    display: none;
}

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

@-moz-keyframes move {
    0% {
       background-position: 0 0;
    }
    100% {
       background-position:...