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

Step dots

For a short flow where people only need to know which screen they are on and how many are left.

Feedback

Live preview

Source

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

How to use it

  • Use it for flows with a visible end, about 3-5 steps — switch to bars when there are more
  • Highlight only the current step and leave finished ones faintly marked
  • The dots are not controls; moving between steps belongs to the buttons below

Watch out for

  • Dots are visual only — add wording like "Step 2 of 4" or a dc-sr description
  • Mark the current step with aria-current="step"

Next