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

Chấm bước

Dùng cho luồng ngắn, khi người dùng chỉ cần biết đang ở bước nào và còn mấy bước.

Phản hồi

Xem trước trực tiếp

Nguồn

<nav class="dc-dots" aria-label="가입 단계">
  <ol class="dc-dots__list">
    <li class="dc-dots__item">
      <span class="dc-dots__dot dc-dots__dot--done"></span>
      <span class="dc-sr">1단계 본인 확인, 끝</span>
    </li>
    <li class="dc-dots__item" aria-current="step">
      <span class="dc-dots__dot dc-dots__dot--now"></span>
      <span class="dc-sr">2단계 연락처 입력, 지금 단계</span>
    </li>
    <li class="dc-dots__item">
      <span class="dc-dots__dot"></span>
      <span class="dc-sr">3단계 계좌 등록</span>
    </li>
    <li class="dc-dots__item">
      <span class="dc-dots__dot"></span>
      <span class="dc-sr">4단계 마침</span>
    </li>
  </ol>
  <p class="dc-dots__cap">4단계 중 2단계</p>
</nav>
.dc-dots {
  display: flex; flex-direction: column; align-items: center; gap: var(--dc-2);
  padding: var(--dc-4);
  font-family: var(--dc-font);
}
.dc-dots__list { display: flex; align-items: center; gap: var(--dc-2); width: 100%; justify-content: center; }
.dc-dots__item { display: flex; }
.dc-dots__dot {
  display: block;
  width: 8px; height: 8px;
  border-radius: var(--dc-r-full);
  background: var(--dc-line-bold);
  transition: width var(--dc-slow), background var(--dc-slow);
}
.dc-dots__dot--done { background: color-mix(in srgb, var(--dc-brand) 45%, transparent); }
.dc-dots__dot--now { width: 26px; background: var(--dc-brand); }
.dc-dots__cap { font-size: 12px; color: var(--dc-text-mute); }
.dc-dots__step { font-size: 16px; font-weight: 700; color: var(--dc-text); }
.dc-dots--label { gap: var(--dc-1); }
.dc-dots--bar .dc-dots__list { gap: var(--dc-1); }
.dc-dots--bar .dc-dots__item { flex: 1 1 0; min-width: 0; }
.dc-dots--bar .dc-dots__dot { width: 100%; height: 5px; }
.dc-dots--bar .dc-dots__dot--now { width: 100%; }

Cách dùng

  • Dùng cho luồng thấy được điểm cuối, khoảng 3-5 bước — nhiều hơn thì chuyển sang dạng thanh
  • Chỉ làm nổi bật bước hiện tại, bước đã qua để mờ
  • Chấm không phải nút bấm; việc chuyển bước thuộc về các nút bên dưới

Điểm cần lưu ý

  • Chấm chỉ là hình ảnh — hãy thêm chữ như "Bước 2 / 4" hoặc mô tả dc-sr
  • Đánh dấu bước hiện tại bằng aria-current="step"

Tiếp theo