चरण बिन्दु

छोटो प्रक्रियामा अहिले कुन चरणमा छु र कति बाँकी छ भन्ने मात्र बताउने सानो सूचक।

प्रत्यक्ष पूर्वावलोकन

स्रोत

HTML CSS

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

कसरी प्रयोग गर्ने

अन्त्य देखिने ३-५ चरणको प्रक्रियामा राख्नु — धेरै चरण भए पट्टी रूप प्रयोग गर्नु
अहिलेको चरण मात्र उज्यालो बनाउनु, बितेका चरण धमिलो राख्नु
बिन्दु थिच्ने चीज होइन; चरण बदल्ने काम तलका बटनको हो

ध्यान दिनुपर्ने कुरा

बिन्दु आँखाले मात्र देख्छ — "४ मध्ये २ चरण" जस्तो पाठ वा dc-sr विवरण राख्नु
अहिलेको चरणमा aria-current="step" दिनु

अर्को

छोटो सूचना पट्टी प्रतिक्रिया एप

तानेर ताजा गर्ने प्रतिक्रिया एप

गोलो प्रगति प्रतिक्रिया एप वेब

खाली अवस्था प्रतिक्रिया एप