JSFiddle - React, Tailwind, and code Playground

by StepBaro

HTML

<object type="text/html" class="containerProgress">
  <div id="progress-bar" class="progress-bar-class"></div>
</object>

CSS

html {
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
}

.containerProgress {
  position: relative;
  overflow: hidden;
  left: 0vw;
  top: 0vh;
  margin: 0 auto;
  height: 90vh;
  width: 90vw;
  outline: 1px dashed orange;
  border: solid 1px #ccc;
}

.progress-bar-class {
  position: absolute;
  width: 0vw;
  height: 9.436435124508519vh;
  margin: 8.9vh 0vw 0vh 2vw;
  background: repeating-linear-gradient(-45deg, red, red 2.80299479166666659491vw, orangered 2.80299479166666659491vw, orangered 5.60598958333333297455vw);
  border-radius: 18vh;
  box-shadow: inset 0vw 7.8636959370904332vh 1.40149739583333318982vw rgba(255, 255, 255, 0.1), inset 0vw 0.7863695937090432vh 0vw rgba(255, 255, 255, 0.3), inset 0vw -3.9318479685452166vh 0.42044921875vw rgba(0, 0, 0, 0.2), 0vw 2.3591087811271296vh 0.280299479166666681018vw rgba(0, 0, 0, 0.3);
  left: -0.70074869791666659491vw;
  top: 20vh;
  width: 2.2vw;
}

#progress-bar:after {
  position: absolute;
  width: 30vw;
  height: 16vh;
  background: rgba(13, 13, 13, 0.7);
  border-radius: 18vh;
  content: "";
  left: -0.70074869791666659491vw;
  top: -3.25vh;
  z-index: -1;
}



.progressBarShow {
  animation: progressShow 0.3s cubic-bezier(0.230, 1.000, 0.320, 1.000);
  animation-delay: 0.5s;
  animation-fill-mode: forwards;
}

@-webkit-keyframes progressShow {
  from {
    top: 20vh;
  }

  to {
    top: -3.25vh;
  }
}

JavaScript

const progressBar = document.getElementById("progress-bar");

progressBar.classList.add("progressBarShow");