עיגול אחוזים

משנים רק את המשתנה --p ואת הטקסט. אין כאן SVG ואין חישוב היקף. עיגול אחוזים הוא מחוון טעינה מתוך טעינה והמתנה של כליקס. מה שמורידים הוא קטע HTML ו-CSS בלי תמונות ובלי GIF. אין ספרייה חיצונית, אין שלב בנייה, ואם כליקס ייעלם מחר הקוד ימשיך לעבוד.

מחוון טעינה · התקדמות · טעינה

.klix-percent { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%;
  background: conic-gradient(currentColor calc(var(--p) * 1%), rgba(255,255,255,.15) 0) }
.klix-percent span { display: grid; place-items: center; width: 3.1rem; height: 3.1rem;
  border-radius: 50%; background: #0f172a; font-size: .8rem; font-weight: 700 }