נקודות רודפות

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

מחוון טעינה · נקודות · טעינה

.klix-chase-dots { position: relative; width: 2.6rem; height: 2.6rem }
.klix-chase-dots span { position: absolute; width: .6rem; height: .6rem; border-radius: 50%;
  background: currentColor; animation: klix-chase-d 1.2s ease-in-out infinite }
.klix-chase-dots span:nth-child(1) { top: 0; left: 50%; margin-inline-start: -.3rem }
.klix-chase-dots span:nth-child(2) { right: 0; top: 50%; margin-top: -.3rem; animation-delay: .15s }
.klix-chase-dots span:nth-child(3) { bottom: 0; left: 50%; margin-inline-start: -.3rem; animation-delay: .3s }
.klix-chase-dots span:nth-child(4) { left: 0; top: 50%; margin-top: -.3rem; animation-delay: .45s }
@keyframes klix-chase-d { 0%,100% { transform: scale(.4); opacity: .35 } 50% { transform: scale(1); opacity: 1 } }