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

ה-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) } }