שני מצייני הטעינה הקלאסיים: טבעת מסתובבת ושלוש נקודות מדלגות.
מתי משתמשים: טעינות קצרות. לטעינת תוכן ארוכה עדיף שלד (B15).
הדמו כאן עיצובי-ניטרלי בכוונה. כשהמהלך נכנס לפרויקט, מיובאת רק ההתנהגות: הצבעים, הרדיוסים, הפונטים והצללים יורשים את העיצוב של אותו פרויקט.
הקוד כאן עומד בפני עצמו. כל טוקן עיצוב נושא ברירת מחדל, מחלקות העזר של המאגר מוטמעות בו, ותגי הסקריפט מסודרים לפי הסדר הנכון. פרויקט שמגדיר --accent או --line משלו יורש אותם אוטומטית.
/* מחלקות עזר של המאגר שהרכיב הזה משתמש בהן */
.stage{padding:var(--sec, clamp(120px, 12vw, 260px)) var(--gutter, clamp(24px, 5vw, 96px));position:relative}
.stage.tight{padding-block:clamp(48px,5vw,90px)}
.stage.full{padding-inline:0}
/* CSS07 · ספינר + שלוש נקודות */
.loaders{display:flex;gap:60px;justify-content:center;align-items:center}
.spin{width:42px;height:42px;border-radius:50%;border:4px solid #ececf4;border-top-color:var(--accent, #4a3aff);animation:spin 1s linear infinite}
@keyframes spin{to{rotate:360deg}}
.dots{display:flex;gap:8px}
.dots span{width:11px;height:11px;border-radius:50%;background:var(--accent, #4a3aff);animation:hop 1.2s ease-in-out infinite}
.dots span:nth-child(2){animation-delay:.15s}
.dots span:nth-child(3){animation-delay:.3s}
@keyframes hop{0%,60%,100%{translate:0 0}30%{translate:0 -10px}}
@media(prefers-reduced-motion:reduce){.spin,.dots span{animation:none}}<div class="stage tight"><div class="loaders"><div class="spin"></div><div class="dots"><span></span><span></span><span></span></div></div></div>