JSFiddle - React, Tailwind, and code Playground

by sfoster

HTML

<div id="tray">
  <div id="progressbar" value="50">
  </div>
</div>

<div id="bar2">

</div>

CSS

body {
  background-color: #999;
}
#tray {
  border: 1px solid ButtonShadow;
  border-radius: 6px;
  height: 12px;
  background-color: ButtonFace;
  width: 300px;
  
}
#progressbar {
  width: 50%;
  background: linear-gradient(0.25turn, rgb(144,89,255) 0, rgb(0,97,224) 70%);
  height: 12px;
  border-radius: 6px;
}

#bar2 {
  width: 300px;
  height: 12px;
  border-radius: 6px;
  margin-top: 1em;
  background-image: linear-gradient(90deg, rgb(0,97,224) 0%,
                                           rgb(144,89,255) 25%,
                                           rgb(0,97,224) 50%,
                                           rgb(144,89,255) 75%,
                                           rgb(0,97,224) 100%);
  
  background-size: 200% 100%;
  animation: downloadProgressSlideX 1.5s linear infinite;

}

@keyframes downloadProgressSlideX {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -100% 0;
  }
}