רשת קוביות

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

מחוון טעינה · גיאומטרי · תלת-מימד · תלת-מימד

.klix-l-grid { perspective: 500px }
.klix-l-grid > div { display: grid; grid-template-columns: repeat(3,.7rem); gap: .25rem;
  transform: rotateX(52deg) rotateZ(-38deg); transform-style: preserve-3d }
.klix-l-grid span { width: .7rem; height: .7rem; background: currentColor; border-radius: .1rem;
  animation: klix-l-grid 1.6s ease-in-out infinite }
.klix-l-grid span:nth-child(2),.klix-l-grid span:nth-child(4) { animation-delay: .12s }
.klix-l-grid span:nth-child(3),.klix-l-grid span:nth-child(5),.klix-l-grid span:nth-child(7) { animation-delay: .24s }
.klix-l-grid span:nth-child(6),.klix-l-grid span:nth-child(8) { animation-delay: .36s }
.klix-l-grid span:nth-child(9) { animation-delay: .48s }
@keyframes klix-l-grid { 0%,100% { transform: translateZ(0); opacity: .35 }
  50% { transform: translateZ(1rem); opacity: 1 } }