<div class="dc-prog">
<div class="dc-prog__head">
<span class="dc-prog__label" id="dc-prog-label">서류 업로드</span>
<span class="dc-prog__value">68%</span>
</div>
<div class="dc-prog__track" role="progressbar" aria-labelledby="dc-prog-label" aria-describedby="dc-prog-hint" aria-valuemin="0" aria-valuemax="100" aria-valuenow="68">
<div class="dc-prog__bar" style="width:68%"></div>
</div>
<p class="dc-prog__hint" id="dc-prog-hint">3개 중 2개 올렸습니다 — 남은 파일 1개</p>
</div>
.dc-prog {
display: flex; flex-direction: column; gap: var(--dc-2);
max-width: 420px;
font-family: var(--dc-font);
}
.dc-prog__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--dc-3); }
.dc-prog__label { font-size: 13px; font-weight: 600; color: var(--dc-text); }
.dc-prog__value { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--dc-text-sub); }
.dc-prog__track {
position: relative; overflow: hidden;
height: 10px; border-radius: var(--dc-r-full);
background: var(--dc-sunken);
box-shadow: inset 0 0 0 1px var(--dc-line);
}
.dc-prog__bar {
height: 100%; border-radius: inherit;
background: var(--dc-brand);
transition: width var(--dc-slow);
}
.dc-prog__hint { margin: 0; font-size: 12px; line-height: 1.5; color: var(--dc-text-mute); }
.dc-prog--wait .dc-prog__bar { width: 38%; animation: dc-prog-run 1300ms ease-in-out infinite; }
.dc-prog--slim .dc-prog__track { height: 6px; }
@keyframes dc-prog-run {
0% { transform: translateX(-100%); }
100% { transform: translateX(264%); }
}
@media (prefers-reduced-motion: reduce) {
.dc-prog--wait .dc-prog__bar { width: 100%; transform: none; animation: none !important; opacity: .5; }
}