JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<progress class="bar" value="0.6"></progress>

SCSS

progress.bar {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  border: none;
  height: 1em;

  ::-webkit-progress-value {
    background-image: linear-gradient(
        -45deg,
        transparent 33%,
        rgba(0, 0, 0, 0.1) 33%,
        rgba(0, 0, 0, 0.1) 66%,
        transparent 66%
      ),
      linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.25)),
      linear-gradient(left, hotpink, #f44);

    border-radius: 2px;
    background-size: 35px 20px, 100% 100%, 100% 100%;
  }
}