JSFiddle - React, Tailwind, and code Playground

by elizabethkmathew

HTML

<div class="meter">
 <span style="width: 100%"><span></span></span>
</div>

CSS

.meter {
  height: 5px;
  position: relative;
  background: #fff;
}
.meter > span {
  display: block;
  height: 100%;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background-color: #121b28;
  position: relative;
  overflow: hidden;
}
.meter > span::after, .animate > span > span {
  animation: move 2s linear infinite;
}
@keyframes move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 50px 50px;
  }
}
@keyframes expandWidth {
   0% { width: 0; }
   100% { width: auto; }
}

JavaScript

$(".meter > span").each(function() {
  $(this)
    .data("origWidth", $(this).width())
    .width(0)
    .animate({
      width: $(this).data("origWidth") // or + "%" if fluid
    }, 1200);
});