JSFiddle - React, Tailwind, and code Playground

by dumptyd

HTML

<div class="container">
  
  <div class="bar">
    <div class="inner" tabindex="0"></div>
  </div>
</div>

SCSS

.container {
  margin: 50px auto;
  text-align: center;
}

.bar {
  display: inline-block;
  width: 95vw;
  max-width: 500px;
  height: 10px;
  border: 1px solid black;
  border-radius: 2em;
  padding: 2px;
  
  .inner {
    border-radius: 2em;
  background: repeating-linear-gradient(to right, green, green 0.75%, white 0.75%, white 1%);
    height: 100%;
    width: 100%;
    position: relative;
    &:after {
      content: '';
      position: absolute;
      background: white;
      top: 0; right: 0; height: 100%; width: 100%;
      transition: width 10s linear;
    }
  }
  
  &:hover {
    .inner:after {
      width: 0%;
    }
  }
}