Skeleton Loading Screens — The Shimmer Effect in Pure CSS

.skeleton {
  background: linear-gradient(90deg,
    #1c1c27 25%, #2a2a38 50%, #1c1c27 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 8px;
}
@keyframes shimmer {
  to { background-position: -200% 0; }
}

/* shape the placeholders like real content */
.skel-title  { height: 20px; width: 60%; }
.skel-text   { height: 12px; width: 100%; margin-top: 10px; }
.skel-avatar { width: 48px; aspect-ratio: 1; border-radius: 50%; }

async function load() {
  card.innerHTML = skeletonHTML;         // instant
  const data = await fetchData();
  card.innerHTML = renderCard(data);     // replace when ready
}