गोलो प्रगति

कति बाँकी छ भनी सङ्ख्यामा भन्न सकिने बेला प्रयोग हुने प्रगति सूचक।

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

स्रोत

HTML CSS

<div class="dc-ring-wrap">
  <div class="dc-ring" style="--dc-ring: 68" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="68" aria-labelledby="dc-ring-cap">
    <span class="dc-ring__num">68<span class="dc-ring__pct">%</span></span>
  </div>
  <p class="dc-ring__cap" id="dc-ring-cap">서류 검토 진행률</p>
</div>

.dc-ring-wrap {
  display: flex; flex-direction: column; align-items: center; gap: var(--dc-3);
  padding: var(--dc-5);
  font-family: var(--dc-font);
}
.dc-ring {
  position: relative;
  display: grid; place-items: center;
  width: 112px; height: 112px;
  border-radius: var(--dc-r-full);
  background: conic-gradient(var(--dc-brand) calc(var(--dc-ring, 0) * 1%), var(--dc-sunken) 0);
}
.dc-ring::after {
  content: "";
  position: absolute; inset: 12px;
  border-radius: var(--dc-r-full);
  background: var(--dc-surface);
}
.dc-ring__num {
  position: relative;
  font-size: 24px; font-weight: 700; letter-spacing: -.02em;
  color: var(--dc-text);
}
.dc-ring__pct { margin-left: 1px; font-size: 13px; color: var(--dc-text-sub); }
.dc-ring__check {
  position: relative;
  font-size: 30px; font-weight: 700; line-height: 1;
  color: var(--dc-ok);
}
.dc-ring__cap {
  max-width: 240px;
  font-size: 13px; line-height: 1.5; color: var(--dc-text-sub);
  text-align: center;
}
.dc-ring--ok {
  background: conic-gradient(var(--dc-ok) calc(var(--dc-ring, 0) * 1%), var(--dc-sunken) 0);
}
.dc-ring--sm { width: 44px; height: 44px; }
.dc-ring--sm::after { inset: 5px; }
.dc-ring-row {
  display: flex; align-items: center; gap: var(--dc-3);
  min-height: 64px; padding: var(--dc-3) var(--dc-4);
  background: var(--dc-surface);
  border: 1px solid var(--dc-line);
  border-radius: var(--dc-r-md);
  font-family: var(--dc-font);
}
.dc-ring-row__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dc-ring-row__title { font-size: 15px; font-weight: 700; color: var(--dc-text); }
.dc-ring-row__sub { font-size: 13px; color: var(--dc-text-sub); }

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

अन्त्य थाहा भएको काममा मात्र (अपलोड, जाँच चरण, लक्ष्य) — थाहा नभए घुम्ने सूचक प्रयोग गर्नु
भित्रको सङ्ख्या मुख्य सन्देश हो; बाहिर कुन कामको प्रगति हो एक हरफ लेख्नु
सूचीको हरफभित्र राख्दा सानो आकार बनाउनु र पाठ छेउमा राख्नु

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

role=progressbar र aria-valuenow नभए सङ्ख्या चित्र मात्र हुन्छ
रङले मात्र सम्पन्न भयो नभन्नु — चिन्ह वा पाठ पनि राख्नु

अर्को

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

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

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

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