ספינר גרדיאנט

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

מחוון טעינה · ספינר · טעינה

.klix-spinner-grad { width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, currentColor);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0);
  animation: klix-spin-l 1s linear infinite }
@keyframes klix-spin-l { to { transform: rotate(360deg) } }