Skip to content
EN KO VI NE KM ID
Design business cards Character collection 16 designs · PNG / SVG / PDF

Progress bar

For work longer than a couple of seconds, where seeing how much is left is what keeps people waiting.

Feedback

Live preview

Source

<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; }
}

How to use it

  • Use a percentage only when you can really count the end — otherwise go indeterminate
  • Pair the number with what is left, like '2 of 3 files'
  • Never ship a bare bar — a label says what is running

Watch out for

  • Without aria-valuenow on role=progressbar, a screen reader reads no progress at all
  • Never let the number go backwards — a falling bar reads as stalled

Next