Đế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

Vòng tiến trình

Dùng khi tiến trình đo được bằng con số và phần còn lại là điều người dùng quan tâm.

Phản hồi

Xem trước trực tiếp

Nguồn

<div class="dc-ring-wrap">
  <div class="dc-ring" style="--dc-ring: 68" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="68" aria-labelledby="dc-ring-cap">
    <span class="dc-ring__num">68<span class="dc-ring__pct">%</span></span>
  </div>
  <p class="dc-ring__cap" id="dc-ring-cap">서류 검토 진행률</p>
</div>
.dc-ring-wrap {
  display: flex; flex-direction: column; align-items: center; gap: var(--dc-3);
  padding: var(--dc-5);
  font-family: var(--dc-font);
}
.dc-ring {
  position: relative;
  display: grid; place-items: center;
  width: 112px; height: 112px;
  border-radius: var(--dc-r-full);
  background: conic-gradient(var(--dc-brand) calc(var(--dc-ring, 0) * 1%), var(--dc-sunken) 0);
}
.dc-ring::after {
  content: "";
  position: absolute; inset: 12px;
  border-radius: var(--dc-r-full);
  background: var(--dc-surface);
}
.dc-ring__num {
  position: relative;
  font-size: 24px; font-weight: 700; letter-spacing: -.02em;
  color: var(--dc-text);
}
.dc-ring__pct { margin-left: 1px; font-size: 13px; color: var(--dc-text-sub); }
.dc-ring__check {
  position: relative;
  font-size: 30px; font-weight: 700; line-height: 1;
  color: var(--dc-ok);
}
.dc-ring__cap {
  max-width: 240px;
  font-size: 13px; line-height: 1.5; color: var(--dc-text-sub);
  text-align: center;
}
.dc-ring--ok {
  background: conic-gradient(var(--dc-ok) calc(var(--dc-ring, 0) * 1%), var(--dc-sunken) 0);
}
.dc-ring--sm { width: 44px; height: 44px; }
.dc-ring--sm::after { inset: 5px; }
.dc-ring-row {
  display: flex; align-items: center; gap: var(--dc-3);
  min-height: 64px; padding: var(--dc-3) var(--dc-4);
  background: var(--dc-surface);
  border: 1px solid var(--dc-line);
  border-radius: var(--dc-r-md);
  font-family: var(--dc-font);
}
.dc-ring-row__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dc-ring-row__title { font-size: 15px; font-weight: 700; color: var(--dc-text); }
.dc-ring-row__sub { font-size: 13px; color: var(--dc-text-sub); }

Cách dùng

  • Chỉ dùng khi biết điểm kết thúc (tải lên, bước xét duyệt, mục tiêu) — không biết thì dùng vòng xoay
  • Con số bên trong là trọng tâm; bên ngoài ghi một dòng cho biết đang tiến trình gì
  • Khi đặt trong dòng danh sách, dùng cỡ nhỏ và đưa chữ sang bên cạnh

Điểm cần lưu ý

  • Thiếu role=progressbar và aria-valuenow thì con số chỉ là hình vẽ
  • Không chỉ dựa vào màu để báo hoàn tất, hãy thêm dấu tích hoặc chữ

Tiếp theo