כדור במסלול

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

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

.klix-l-orbit { perspective: 600px; width: 3.4rem; height: 3.4rem }
.klix-l-orbit > div { position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d; transform: rotateX(62deg);
  animation: klix-l-orbit 2s linear infinite }
.klix-l-orbit i { position: absolute; inset: 0; border: 2px dashed currentColor;
  border-radius: 50%; opacity: .3 }
.klix-l-orbit b { position: absolute; top: -.35rem; left: 50%; width: .7rem; height: .7rem;
  border-radius: 50%; background: currentColor }
@keyframes klix-l-orbit { to { transform: rotateX(62deg) rotateZ(360deg) } }