프로그레스 바

<div class="pbw">
  <div class="pbtop"><span>업로드 중</span><b id="pbv">0%</b></div>
  <div class="pb" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="pbfill" id="pbf"></div></div>
  <div class="pb2"><div class="pb2fill"></div></div>
</div>

.pbw{width:min(230px,88%);display:grid;gap:16px}
.pbtop{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
.pbtop b{color:var(--fg)}
.pb{height:8px;border-radius:5px;background:var(--line);overflow:hidden}
.pbfill{height:100%;width:0%;background:var(--accent);border-radius:5px;transition:width .3s linear}
.pb2{height:4px;border-radius:3px;background:var(--line);overflow:hidden;position:relative}
.pb2fill{position:absolute;top:0;bottom:0;width:35%;background:var(--accent-2,#f25c8a);border-radius:3px;animation:indet 1.3s ease-in-out infinite}
@keyframes indet{0%{left:-35%}100%{left:100%}}

const pbf = document.getElementById('pbf'), pbv = document.getElementById('pbv'), pb = document.querySelector('.pb');
let v = 0;
setInterval(() => {
  v = (v + 4) % 104;
  const cv = Math.min(v, 100);
  pbf.style.width = cv + '%'; pbv.textContent = cv + '%'; pb.setAttribute('aria-valuenow', String(cv));
}, 140);