Cincin progres
Untuk progres yang bisa dihitung angkanya, saat sisa pekerjaan lebih penting dari waktunya.
Pratinjau langsung
Sumber
<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); }Cara memakainya
- Pakai hanya bila ujungnya diketahui (unggah, tahap tinjauan, target) — kalau tidak, pakai spinner
- Angka di dalam adalah pesannya; di luar tulis satu baris tentang apa yang sedang berjalan
- Di dalam baris daftar, pakai ukuran kecil dan pindahkan teks ke sampingnya
Hal yang perlu diwaspadai
- Tanpa role=progressbar dan aria-valuenow, angka itu hanya hiasan
- Jangan menandai selesai hanya dengan warna — tambahkan tanda centang atau kata