כוס עם אדים

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

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

.klix-coffee { position: relative; width: 3rem; padding-top: 1.1rem }
.klix-coffee i { display: block; width: 2.2rem; height: 1.7rem; margin: 0 auto;
  border: 2px solid currentColor; border-top: 0; border-radius: 0 0 .7rem .7rem }
.klix-coffee i::after { content: ""; position: absolute; bottom: .35rem; right: .05rem;
  width: .7rem; height: .8rem; border: 2px solid currentColor; border-inline-start: 0;
  border-radius: 0 .5rem .5rem 0 }
.klix-coffee b { position: absolute; top: 0; width: .18rem; height: .8rem; border-radius: 999px;
  background: currentColor; opacity: 0; animation: klix-coffee-s 2s ease-in-out infinite }
.klix-coffee b:nth-of-type(1) { left: .9rem }
.klix-coffee b:nth-of-type(2) { left: 1.4rem; animation-delay: .5s }
.klix-coffee b:nth-of-type(3) { left: 1.9rem; animation-delay: 1s }
@keyframes klix-coffee-s {
  0% { opacity: 0; transform: translateY(6px) scaleY(.6) }
  40% { opacity: .8 }
  100% { opacity: 0; transform: translateY(-8px) scaleY(1.3) } }