JSFiddle - React, Tailwind, and code Playground

HTML

<section>
  <h2>Progress bar using pure CSS</h2>
  <p>Rendered using a single <code>&lt;div&gt;</code> and some CSS. The only JavaScript here sets its CSS <code>--progress</code> custom property when the input field changes.</p>
</section>

<!-- This is it: -->
<section>
  <div id="progress" class="progressbar" style="--progress: 0.25;"></div>
</section>

<section>
  <label for="amount">Percentage (0 – 1)</label> <input id="amount" value="0.25" type="number" min="0" max="1" step="0.05">
</section>

<section>
  <p><em>Uses CSS Custom Properties (CSS Variables), which is supported in every current browser but Edge (coming in Edge 15, Spring 2017)</em></p>
</section>

CSS

div.progressbar {
  display: inline-block;
  height: 20px;
  width: 100%;
  border: 1px solid #888;
  border-radius: 20px;
  background: #eee;
  position: relative;
  overflow: hidden;
}

@keyframes stripes {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 28.28px 0;
  }
}

div.progressbar::after {
  position: absolute;
  content: '';
  left: -28.28px;
  top: 0;
  width: calc(100% * var(--progress, 0) + 28.28px);
  bottom: 0;
  background: repeating-linear-gradient(
    -45deg,
    #333,
    #333 10px,
    #666 10px,
    #666 20px
  );
  transition: width 0.2s linear;
    
  animation-duration: 2s;
  animation-name: stripes;
  animation-iteration-count: infinite;

  animation-timing-function: linear;
}

JavaScript

document.querySelector("#amount").addEventListener("input", function() {
  document.querySelector("#progress").style.setProperty("--progress", parseFloat(this.value));
});