שלד פרופיל

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

מחוון טעינה · שלד · טעינה

.klix-skel-avatar { display: flex; gap: .8rem; align-items: center; width: 13rem }
.klix-skel-avatar i { width: 2.6rem; height: 2.6rem; border-radius: 50%; flex: none }
.klix-skel-avatar div { flex: 1; display: grid; gap: .45rem }
.klix-skel-avatar b { display: block; height: .6rem; border-radius: 999px }
.klix-skel-avatar b:last-child { width: 60% }
.klix-skel-avatar i, .klix-skel-avatar b {
  background: linear-gradient(90deg, rgba(148,163,184,.18) 25%, rgba(148,163,184,.4) 37%, rgba(148,163,184,.18) 63%);
  background-size: 400% 100%; animation: klix-skel-av 1.4s ease infinite }
@keyframes klix-skel-av { 0% { background-position: 100% 50% } 100% { background-position: 0 50% } }