כדור מקפץ

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

מחוון טעינה · שובב · טעינה

.klix-ball { position: relative; width: 3rem; height: 3rem }
.klix-ball span { position: absolute; top: 0; inset-inline-start: 1.1rem; width: .8rem; height: .8rem;
  border-radius: 50%; background: currentColor; animation: klix-ball-b .7s cubic-bezier(.5,0,.5,1) infinite alternate }
.klix-ball i { position: absolute; bottom: 0; inset-inline-start: 1rem; width: 1rem; height: .2rem;
  border-radius: 50%; background: currentColor; opacity: .3;
  animation: klix-ball-s .7s cubic-bezier(.5,0,.5,1) infinite alternate }
@keyframes klix-ball-b { to { transform: translateY(2.2rem) } }
@keyframes klix-ball-s { to { transform: scaleX(1.5); opacity: .15 } }