שעון מתקתק

שעון מתקתק הוא מחוון טעינה מתוך טעינה והמתנה של כליקס. מה שמורידים הוא קטע 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) } }