טבעת מתמלאת

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

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

@property --klix-ring-p { syntax: "<percentage>"; inherits: false; initial-value: 0% }
.klix-ring-progress { width: 3rem; height: 3rem; border-radius: 50%;
  background: conic-gradient(currentColor var(--klix-ring-p), rgba(148,163,184,.25) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
  animation: klix-ring-p 2.4s ease-in-out infinite }
@keyframes klix-ring-p { 0% { --klix-ring-p: 3% } 100% { --klix-ring-p: 100% } }