Đến nội dung chính
EN KO VI NE KM ID
Thiết kế danh thiếp English Bộ sưu tập nhân vật 16 mẫu · PNG / SVG / PDF

Thanh tiến trình

Dùng cho việc chạy lâu hơn vài giây, khi thấy được còn bao nhiêu mới khiến người dùng chịu chờ.

Phản hồi

Xem trước trực tiếp

Nguồn

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

Cách dùng

  • Chỉ dùng phần trăm khi thật sự đếm được điểm kết thúc — nếu không thì để dạng không xác định
  • Kèm theo con số là phần còn lại, ví dụ '2 trên 3 tệp'
  • Đừng để thanh trơ trọi — phải có nhãn nói đang chạy việc gì

Điểm cần lưu ý

  • Thiếu aria-valuenow trên role=progressbar thì trình đọc màn hình không đọc được tiến độ
  • Đừng để con số tụt xuống — thanh lùi lại bị hiểu là đã treo

Tiếp theo