Loading Skeleton

代码

* {
  box-sizing: border-box;
}

@keyframes shimmer {
  0% {
    background-position: -220% 0;
  }

  100% {
    background-position: 220% 0;
  }
}

body {
  margin: 0;
  font-family: "Sora", system-ui, sans-serif;
  background: #0a1020;
  color: #e2e8f0;
}

.shell {
  width: min(860px, calc(100% - 2rem));
  margin: 2rem auto;
}

.state-skeleton,
.state-content {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  background: #121b31;
  padding: 1rem;
}

.line,
.card {
  background: linear-gradient(110deg, #1f2a42 8%, #334155 18%, #1f2a42 33%);
  background-size: 220% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: 8px;
}

.line {
  height: 14px;
  margin-bottom: 0.55rem;
}

.w-40 {
  width: 40%;
}

.w-90 {
  width: 90%;
}

.w-70 {
  width: 70%;
}

.cards {
  margin-top: 0.8rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
}

.card {
  min-height: 110px;
}

header h2 {
  margin: 0 0 0.35rem;
}

header p {
  margin-top: 0;
  color: #94a3b8;
}

.content-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  margin-top: 0.9rem;
}

.content-card {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: #1a2742;
  padding: 0.8rem;
}

.content-card h3 {
  margin: 0 0 0.3rem;
  font-size: 0.95rem;
}

.content-card p {
  margin: 0;
  font-size: 0.85rem;
  color: #94a3b8;
}

@media (max-width: 760px) {
  .cards,
  .content-cards {
    grid-template-columns: 1fr;
  }
}

(() => {
  const skeleton = document.getElementById("skeleton");
  const content = document.getElementById("content");
  const title = document.getElementById("title");
  const subtitle = document.getElementById("subtitle");
  const items = document.getElementById("items");

  const payload = {
    title: "Team Activity",
    subtitle: "Fetched in 1.4s from the mocked API",
    cards: [
      { title: "Deploy finished", body: "Production release completed successfully." },
      { title: "New signups", body: "26 new accounts created in the last hour." },
      { title: "Incident resolved", body: "Payment gateway warning closed." },
    ],
  };

  setTimeout(() => {
    title.textContent = payload.title;
    subtitle.textContent = payload.subtitle;

    items.innerHTML = "";
    for (const card of payload.cards) {
      const article = document.createElement("article");
      article.className = "content-card";
      article.innerHTML = `<h3>${card.title}</h3><p>${card.body}</p>`;
      items.appendChild(article);
    }

    skeleton.hidden = true;
    content.hidden = false;
  }, 1400);
})();

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Loading Skeleton</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <main class="shell">
    <h1>Loading Skeleton Page</h1>

    <section id="skeleton" class="state-skeleton" aria-label="Loading content">
      <div class="line w-40"></div>
      <div class="line w-90"></div>
      <div class="line w-70"></div>
      <div class="cards">
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
      </div>
    </section>

    <section id="content" class="state-content" hidden>
      <header>
        <h2 id="title"></h2>
        <p id="subtitle"></p>
      </header>
      <div id="items" class="content-cards"></div>
    </section>
  </main>

  <script src="script.js"></script>
</body>
</html>

A full-page loading pattern that simulates asynchronous data hydration and swaps skeleton blocks for actual UI.

Features

Structured page skeleton
Timed loading state transition
Smooth content reveal
Reduced-motion friendly animation

Notes

This focuses on page-state choreography, distinct from the component-level skeleton-loader resource.