קובייה טוענת

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

מחוון טעינה · ספינר · תלת-מימד · תלת-מימד

.klix-l-cube { perspective: 400px; width: 2.8rem; height: 2.8rem }
.klix-l-cube > div { position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d; animation: klix-l-cube 3s linear infinite }
.klix-l-cube span { position: absolute; inset: 0; border: 2px solid currentColor; opacity: .75 }
.klix-l-cube span:nth-child(1) { transform: translateZ(1.4rem) }
.klix-l-cube span:nth-child(2) { transform: rotateY(180deg) translateZ(1.4rem) }
.klix-l-cube span:nth-child(3) { transform: rotateY(90deg) translateZ(1.4rem) }
.klix-l-cube span:nth-child(4) { transform: rotateY(-90deg) translateZ(1.4rem) }
.klix-l-cube span:nth-child(5) { transform: rotateX(90deg) translateZ(1.4rem) }
.klix-l-cube span:nth-child(6) { transform: rotateX(-90deg) translateZ(1.4rem) }
@keyframes klix-l-cube { to { transform: rotateX(360deg) rotateY(360deg) } }