טבעת מתמלאת

אחוזים לא מתאנמים בגרדיאנט מעצמם. השורה @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% } }