JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="container">
  <span class="bar" style="width:30%;"></span>
  <!-- <span class="point point01"></span>
  <span class="point point02"></span>
  <span class="point point03"></span> -->
</div>

<div class="container">
  <span class="bar" style="width:60%;"></span>
  <!-- <span class="point point01"></span>
  <span class="point point02"></span>
  <span class="point point03"></span> -->
</div>

SCSS

.container {
  position: relative;
  margin: 30px;
  width: 400px;
  height: 8px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  .bar {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    height: 8px;
    border-radius: 4px;
    background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 100%), radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 100%), #415ADE;
    background-attachment: fixed, fixed, scroll;
    background-repeat: no-repeat;
    background-position: top 50% left 2px, top 50% left 50%, top left;
    background-size: 4px 4px, 4px 4px, 100% 100%;
    /* mix-blend-mode: screen; */
  }
  .point {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.3);
    background: #ffffff;
    transform: translateY(-50%);
    mix-blend-mode: screen;
    &.point01 {
      left: 2px;
    }
    &.point02 {
      left: 50%;
      transform: translate(-50%, -50%);
    }
    &.point03 {
      right: 2px;
    }
  }
}