להבים דוהים

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

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

.klix-blade { position: relative; width: 2.6rem; height: 2.6rem }
.klix-blade span { position: absolute; top: 0; left: 50%; width: .18rem; height: .8rem;
  margin-inline-start: -.09rem; border-radius: 999px; background: currentColor;
  transform-origin: 50% 1.3rem; animation: klix-blade-f 1s linear infinite }
.klix-blade span:nth-child(1) { transform: rotate(0deg); animation-delay: -1s }
.klix-blade span:nth-child(2) { transform: rotate(45deg); animation-delay: -.875s }
.klix-blade span:nth-child(3) { transform: rotate(90deg); animation-delay: -.75s }
.klix-blade span:nth-child(4) { transform: rotate(135deg); animation-delay: -.625s }
.klix-blade span:nth-child(5) { transform: rotate(180deg); animation-delay: -.5s }
.klix-blade span:nth-child(6) { transform: rotate(225deg); animation-delay: -.375s }
.klix-blade span:nth-child(7) { transform: rotate(270deg); animation-delay: -.25s }
.klix-blade span:nth-child(8) { transform: rotate(315deg); animation-delay: -.125s }
@keyframes klix-blade-f { 0% { opacity: 1 } 100% { opacity: .15 } }