שעון מתקתק

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

מחוון טעינה · סמל · טעינה

.klix-clock { position: relative; width: 2.6rem; height: 2.6rem; border: 2px solid currentColor;
  border-radius: 50% }
.klix-clock span { position: absolute; inset-inline-start: 50%; bottom: 50%; width: 2px;
  background: currentColor; transform-origin: bottom center }
.klix-clock span:nth-child(1) { height: .7rem; animation: klix-spin-l 3s steps(12) infinite }
.klix-clock span:nth-child(2) { height: 1rem; animation: klix-spin-l 36s steps(12) infinite }
@keyframes klix-spin-l { to { transform: rotate(360deg) } }