Lompat ke konten
EN KO VI NE KM ID
Desain kartu nama English Koleksi karakter 16 desain · PNG / SVG / PDF

Titik langkah

Untuk alur pendek, saat orang hanya perlu tahu sedang di langkah mana dan sisa berapa.

Umpan balik

Pratinjau langsung

Sumber

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

Cara memakainya

  • Pakai untuk alur yang ujungnya terlihat, sekitar 3-5 langkah — lebih dari itu ganti bentuk bilah
  • Tegaskan hanya langkah saat ini, langkah yang lewat dibiarkan pudar
  • Titik bukan tombol; perpindahan langkah adalah tugas tombol di bawah

Hal yang perlu diwaspadai

  • Titik hanya terlihat mata — tambahkan teks seperti "Langkah 2 dari 4" atau keterangan dc-sr
  • Tandai langkah saat ini dengan aria-current="step"

Berikutnya