Skeleton Loading Effect

程式碼

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: #0f172a;
  color: #e2e8f0;
  font-family: system-ui, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}

.demo {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
  padding: 2rem;
}

/* Skeleton shimmer */
.skeleton {
  background: #1e293b;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.06) 50%,
    transparent 100%
  );
  animation: shimmer 1.8s ease-in-out infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Card skeleton */
.skeleton-card {
  width: 280px;
  background: #1a2332;
  border-radius: 14px;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.skeleton-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
}

.skeleton-avatar--sm {
  width: 32px;
  height: 32px;
}

.skeleton-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.skeleton-line {
  height: 12px;
  border-radius: 6px;
}

.skeleton-line--sm {
  height: 9px;
}

.skeleton-image {
  width: 100%;
  height: 140px;
  border-radius: 10px;
  margin-bottom: 1rem;
}

.skeleton-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.skeleton-footer {
  display: flex;
  gap: 0.5rem;
}

.skeleton-btn {
  height: 32px;
  border-radius: 8px;
}

/* List skeleton */
.skeleton-list {
  width: 260px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.skeleton-list-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #1a2332;
  border-radius: 12px;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.skeleton-list-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

@media (prefers-reduced-motion: reduce) {
  .skeleton::after {
    animation: none;
  }
}

// Skeleton loading is CSS-only — no JS required.
// This file is included for consistency with the snippet structure.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Skeleton Loading Effect</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="demo">
    <!-- Skeleton card -->
    <div class="skeleton-card">
      <div class="skeleton-header">
        <div class="skeleton skeleton-avatar"></div>
        <div class="skeleton-meta">
          <div class="skeleton skeleton-line" style="width: 60%;"></div>
          <div class="skeleton skeleton-line skeleton-line--sm" style="width: 40%;"></div>
        </div>
      </div>
      <div class="skeleton skeleton-image"></div>
      <div class="skeleton-body">
        <div class="skeleton skeleton-line" style="width: 100%;"></div>
        <div class="skeleton skeleton-line" style="width: 85%;"></div>
        <div class="skeleton skeleton-line" style="width: 70%;"></div>
      </div>
      <div class="skeleton-footer">
        <div class="skeleton skeleton-btn" style="width: 80px;"></div>
        <div class="skeleton skeleton-btn" style="width: 60px;"></div>
      </div>
    </div>

    <!-- Skeleton list -->
    <div class="skeleton-list">
      <div class="skeleton-list-item">
        <div class="skeleton skeleton-avatar skeleton-avatar--sm"></div>
        <div class="skeleton-list-text">
          <div class="skeleton skeleton-line" style="width: 75%;"></div>
          <div class="skeleton skeleton-line skeleton-line--sm" style="width: 50%;"></div>
        </div>
      </div>
      <div class="skeleton-list-item">
        <div class="skeleton skeleton-avatar skeleton-avatar--sm"></div>
        <div class="skeleton-list-text">
          <div class="skeleton skeleton-line" style="width: 65%;"></div>
          <div class="skeleton skeleton-line skeleton-line--sm" style="width: 45%;"></div>
        </div>
      </div>
      <div class="skeleton-list-item">
        <div class="skeleton skeleton-avatar skeleton-avatar--sm"></div>
        <div class="skeleton-list-text">
          <div class="skeleton skeleton-line" style="width: 80%;"></div>
          <div class="skeleton skeleton-line skeleton-line--sm" style="width: 55%;"></div>
        </div>
      </div>
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>

Animated skeleton placeholder with shimmer gradient. Reference patterns from loading-skeleton and ai-thinking-loader.

Features

CSS-only shimmer animation (no JS required)
Card skeleton with avatar, title, text, and image placeholders
Customizable via CSS custom properties
prefers-reduced-motion respected