Skeleton loader

<div class="skeleton-demo">
  <article class="profile is-loading" aria-busy="true" aria-live="polite">
    <div class="avatar"></div>
    <div class="profile-text">
      <h3 class="line" data-text="Ada Lovelace"></h3>
      <p class="line" data-text="Wrote the first algorithm meant for a machine."></p>
      <p class="line short" data-text="London · 1843"></p>
    </div>
  </article>
  <button class="reload" type="button">Load again</button>
</div>

.skeleton-demo { display: grid; justify-items: center; gap: 14px; width: min(400px, 100%); }

.profile {
  display: flex;
  gap: 16px;
  width: 100%;
  padding: 20px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  font: 15px/1.4 system-ui, sans-serif;
}
.avatar { flex: none; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #3684ff, #a855f7); }
.profile-text { flex: 1; min-width: 0; display: grid; gap: 8px; align-content: center; }
.profile h3 { margin: 0; font-size: 17px; }
.profile p { margin: 0; color: var(--muted); }

/* Loading state: grey bars with a soft light sweeping across them.
   The bars keep the same height as the text, so nothing jumps when it loads. */
.is-loading .avatar,
.is-loading .line {
  color: transparent;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--surface-2) 30%, var(--line) 50%, var(--surface-2) 70%);
  background-size: 300% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}
.is-loading .avatar { border-radius: 50%; }
.is-loading .line { min-height: 1.2em; }
.is-loading .line.short { width: 40%; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* Reduced motion: a slow, gentle sweep instead of a fast one. */
@media (prefers-reduced-motion: reduce) {
  .is-loading .avatar, .is-loading .line { animation-duration: 3s; }
}

.reload {
  border: 0;
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 10px;
  font: 600 13px system-ui, sans-serif;
  color: var(--fg);
  background: var(--surface-2);
}

// Skeleton loader: show placeholders, then swap in real content when it
// arrives. Here a timer stands in for a network request.

const profile = document.querySelector('.profile');
const lines = profile.querySelectorAll('[data-text]');
const fakeLoadTime = 1800; // ms

function showLoading() {
  profile.classList.add('is-loading');
  profile.setAttribute('aria-busy', 'true');
  lines.forEach((line) => (line.textContent = ''));
}

function showContent() {
  lines.forEach((line) => (line.textContent = line.dataset.text));
  profile.classList.remove('is-loading');
  profile.setAttribute('aria-busy', 'false');
}

function load() {
  showLoading();
  setTimeout(showContent, fakeLoadTime); // replace with your fetch()
}

document.querySelector('.reload').addEventListener('click', load);
load();