שתי קשתות

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

מחוון טעינה · ספינר · טעינה

.klix-arc-double { position: relative; width: 2.8rem; height: 2.8rem }
.klix-arc-double::before, .klix-arc-double::after { content: ""; position: absolute;
  border-radius: 50%; border: 3px solid transparent }
.klix-arc-double::before { inset: 0; border-top-color: currentColor;
  animation: klix-spin-l 1.1s linear infinite }
.klix-arc-double::after { inset: .55rem; border-bottom-color: currentColor;
  animation: klix-spin-l .8s linear infinite reverse }
@keyframes klix-spin-l { to { transform: rotate(360deg) } }