प्रगति पट्टी

दुई सेकेन्डभन्दा लामो काममा, कति बाँकी छ देखेपछि मात्र मान्छे कुर्ने हुँदा प्रयोग गर्ने टुक्रा।

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

स्रोत

HTML CSS

<div class="dc-prog">
  <div class="dc-prog__head">
    <span class="dc-prog__label" id="dc-prog-label">서류 업로드</span>
    <span class="dc-prog__value">68%</span>
  </div>
  <div class="dc-prog__track" role="progressbar" aria-labelledby="dc-prog-label" aria-describedby="dc-prog-hint" aria-valuemin="0" aria-valuemax="100" aria-valuenow="68">
    <div class="dc-prog__bar" style="width:68%"></div>
  </div>
  <p class="dc-prog__hint" id="dc-prog-hint">3개 중 2개 올렸습니다 — 남은 파일 1개</p>
</div>

.dc-prog {
  display: flex; flex-direction: column; gap: var(--dc-2);
  max-width: 420px;
  font-family: var(--dc-font);
}
.dc-prog__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--dc-3); }
.dc-prog__label { font-size: 13px; font-weight: 600; color: var(--dc-text); }
.dc-prog__value { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--dc-text-sub); }
.dc-prog__track {
  position: relative; overflow: hidden;
  height: 10px; border-radius: var(--dc-r-full);
  background: var(--dc-sunken);
  box-shadow: inset 0 0 0 1px var(--dc-line);
}
.dc-prog__bar {
  height: 100%; border-radius: inherit;
  background: var(--dc-brand);
  transition: width var(--dc-slow);
}
.dc-prog__hint { margin: 0; font-size: 12px; line-height: 1.5; color: var(--dc-text-mute); }
.dc-prog--wait .dc-prog__bar { width: 38%; animation: dc-prog-run 1300ms ease-in-out infinite; }
.dc-prog--slim .dc-prog__track { height: 6px; }
@keyframes dc-prog-run {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(264%); }
}
@media (prefers-reduced-motion: reduce) {
  .dc-prog--wait .dc-prog__bar { width: 100%; transform: none; animation: none !important; opacity: .5; }
}

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

अन्त्य गन्न सकिन्छ भने मात्र प्रतिशत देखाउनुहोस् — नत्र अनिश्चित राख्नुहोस्
सङ्ख्यासँगै '३ मा २' जस्तो बाँकी कति छ पनि लेख्नुहोस्
खाली पट्टी मात्र न राख्नुहोस् — के चलिरहेको छ लेबलले भन्नुपर्छ

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

role=progressbar मा aria-valuenow नभए स्क्रिन रिडरले प्रगति पढ्दैन
बढेको प्रतिशत पछाडि न फर्काउनुहोस् — घट्ने पट्टी अड्किएको जस्तो देखिन्छ

अर्को

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

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

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

चरण बिन्दु प्रतिक्रिया एप