Jam Sempoa

Terdapat bermacam jenis serta gaya paparan jam yang boleh kita jumpa di Internet. Salah satunya, di bawah. Tanpa melihat angka tertera dapatkah anda tahu waktu yang dipaparkan?

Jam Sempoa

<div class="labu">
 <div class="abaclock">
  <div data-beads= 2 style="--color: red"></div>
  <div data-beads=10 style="--color: red"></div>
  <div data-beads= 6 style="--color: green"></div>
  <div data-beads=10 style="--color: green"></div>
  <div data-beads= 6 style="--color: blue"></div>
  <div data-beads=10 style="--color: blue"></div>
   <time></time> 
</div> 
  </div>
<style>
  .abaclock{
  --max-beads: 10;
  --min-beads-gap: 4;
  container-type: inline-size;
  display: grid;
  width: min(30rem, 100%);
  margin-inline: auto;
  position: relative;
  --grad: hsl(0 0% 100% / .25), hsl(0 0% 100% / .5) 25%, hsl(0 0% 0% / .5) 90%;
  &::before, &::after{
    content: "";
    position: absolute;
    width: 5cqi;
    background-color: orange;
    background-image: linear-gradient(90deg, var(--grad));
    height: 100%;
    top: 0;
    border-radius: 5cqi 5cqi 0 0;
  }
  &::before { left: 0 }
  &::after { right: 0 }
  > time {
    text-align: center;
    font-size: large;
    background: #fce5cd;
    color: #111;
    margin: auto;
    width: 50%;
  }
  > [data-beads] {
    position: relative;
    display: flex;
    justify-content: flex-end;
    margin-inline: 5cqi;
    margin-block: 1cqi;
    &:first-of-type{ margin-top: 10cqi}
    &::before{
      content: "";
      position: absolute;
      inset: 40% 0;
      background-color: var(--color);
      background-image: linear-gradient(var(--grad));
      z-index: -1;
    }
    > i {
      width: calc(100% / (var(--max-beads) + var(--min-beads-gap,1)));
      aspect-ratio: 1/1.5;
      border-radius:25%;
      transition: transform 0.5s;
      background-color: var(--color);
      background-image: linear-gradient(var(--grad));
      box-shadow: inset 0 -10px 10px hsl(0 0% 0% /.5);
      &[data-active=true] {
        transform: translateX(calc(-100% * (var(--max-beads) - var(--beads, var(--max-beads)) + var(--min-beads-gap,1))));
      }   
    }
  }
}
.labu *, .labu *::before, .labu *::after { box-sizing: border-box}
.labu {
  margin: 0;
  padding: 2rem;
  display: grid;
  align-items: center;
}
.labu::after{
  content: "";
  position: fixed;
  inset: -8px;  
  filter: blur(4px);
  z-index: -1;
}
</style>
  <script>
    abaclock(".abaclock");
function abaclock(selector){
  const abaclockRows = document.querySelectorAll(selector + '>[data-beads]');
  const timeEl = document.querySelector(selector + '>time');
  if(!abaclockRows) return
  const digitEls = [];
  abaclockRows.forEach(digitEl => {
    const beads = Number(digitEl.dataset.beads);
    digitEl.style.setProperty("--beads", beads);
    const beadEls = [];
    digitEls.push(beadEls)
    for(let i = 0; i < beads; i++) {
      const beadEl = document.createElement("i")
      digitEl.append(beadEl);
      beadEls.push(beadEl);
    }
  })
  time();
  function time(){
    const options = { hour24: false, hour: "2-digit", minute: "2-digit", second: "2-digit"};
    const str = new Date().toLocaleTimeString([], options);
    str.match(/\d/g).forEach((d, di) => digitEls[di].forEach((b, bi) => b.dataset.active = bi < d));
    timeEl.dateTime = timeEl.innerHTML = str;
    window.requestAnimationFrame(time);
  }
}
  </script>

CSS & JS dirujuk di codepen.io/MarkBoots/pen/WNPgRLN