Progres

Batang progres untuk kemajuan, dan cincin untuk nilai. Isi data-ck-value (0–100) — JS mengurus lebarnya.

Batang

Empat nada, tiga ketebalan, plus versi bergaris untuk proses yang belum pasti.

72%

Selesai

45%

Lihat kode

<div class="ck-stack ck-stack-4">
  <div class="ck-progress"><div class="ck-progress__track"><div class="ck-progress__bar" data-ck-value="72"></div></div><div class="ck-progress__label">72%</div></div>
  <div class="ck-progress"><div class="ck-progress__track"><div class="ck-progress__bar ck-progress__bar--success" data-ck-value="100"></div></div><div class="ck-progress__label">Selesai</div></div>
  <div class="ck-progress"><div class="ck-progress__track"><div class="ck-progress__bar ck-progress__bar--warning" data-ck-value="45"></div></div><div class="ck-progress__label">45%</div></div>
  <div class="ck-progress ck-progress--thin"><div class="ck-progress__track"><div class="ck-progress__bar ck-progress__bar--destructive" data-ck-value="18"></div></div></div>
  <div class="ck-progress ck-progress--striped"><div class="ck-progress__track"><div class="ck-progress__bar" data-ck-value="60"></div></div></div>
</div>

Cincin nilai

Untuk skor kuis. Keliling dihitung otomatis oleh JS dari radius lingkaran.

Lihat kode

<div class="ck-row ck-row-6 ck-wrap">
  <div class="ck-ring" data-ck-value="92">
    <svg viewBox="0 0 120 120"><circle class="ck-ring__track" cx="60" cy="60" r="52"/><circle class="ck-ring__value" cx="60" cy="60" r="52"/></svg>
    <span class="ck-ring__text">0%</span>
  </div>
  <div class="ck-ring" data-ck-value="64">
    <svg viewBox="0 0 120 120"><circle class="ck-ring__track" cx="60" cy="60" r="52"/><circle class="ck-ring__value" cx="60" cy="60" r="52" style="stroke:hsl(var(--ck-warning))"/></svg>
    <span class="ck-ring__text">0%</span>
  </div>
</div>