JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<div id="progressContainer">
<div id="bar" class="bar-bg"></div>
<div id="progress" class="progress" style="width:50%;"></div>
<div id="currentValue" class="oval"></div>
</div>

CSS

.bar-bg {
  width: 256px;
  height: 10px;
  opacity: 0.2;
  border-radius: 5px;
  box-shadow: inset 0 1px 6px 0 rgba(0, 0, 0, 0.9);
  border: solid 1px $white;
  background-color: $dark-blue;
 }

  .oval {
    width: 24px;
    height: 24px;
    opacity: 0.9;
    mix-blend-mode: color-dodge;
    background-image: radial-gradient(circle at 52% 50%, #cf2d8e, #000000);
    margin-top: -16px;
  }


  .progress {
  height: 8px;
  opacity: 0.9;
  border-radius: 4px;
  box-shadow: 0 0 6px 5px rgba(44, 146, 255, 0.7), inset 0 0 0 1px $icons;
  border: solid 1px $blue;
  background-color: $primary-1;
  margin-top: -9px;
  margin-left: 1px;
  }