CSS 骨架屏載入效果 (Skeleton Screen Loading)

骨架屏（Skeleton Screen）是一種現代的載入設計模式。不同於傳統的轉圈圈（Spinner），骨架屏會在內容尚未載入完成前，顯示一個與實際內容結構相似的灰色佔位區塊，並帶有微弱的流動動畫。

這種做法能顯著提升使用者的感官速度，讓使用者覺得「內容即將出現」。

基本骨架結構

我們通常會為標題、圖片、段落製作不同形狀的骨架。

<div class="skeleton-card">
  <div class="skeleton-img"></div>
  <div class="skeleton-title"></div>
  <div class="skeleton-text"></div>
  <div class="skeleton-text"></div>
</div>

核心 CSS 樣式

關鍵在於設定一個灰色的背景，並加上一個在水平方向移動的漸層動畫（Shimmer effect）。

.skeleton-card {
  width: 300px;
  padding: 16px;
  background: white;
  border-radius: 8px;
}

/* 通用的骨架基礎樣式 */
.skeleton-img, .skeleton-title, .skeleton-text {
  background: #eee;
  background: linear-gradient(
    110deg,
    #ececec 8%,
    #f5f5f5 18%,
    #ececec 33%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s linear infinite;
  border-radius: 4px;
}

.skeleton-img {
  width: 100%;
  height: 180px;
  margin-bottom: 12px;
}

.skeleton-title {
  width: 60%;
  height: 24px;
  margin-bottom: 10px;
}

.skeleton-text {
  width: 100%;
  height: 14px;
  margin-bottom: 8px;
}

@keyframes shimmer {
  to {
    background-position-x: -200%;
  }
}

實作預覽

常見組件的骨架

大頭貼與個人資訊

<div class="skeleton-profile">
  <div class="skeleton-avatar"></div>
  <div class="skeleton-info">
    <div class="skeleton-title"></div>
    <div class="skeleton-text"></div>
  </div>
</div>

.skeleton-profile {
  display: flex;
  align-items: center;
  gap: 16px;
}

.skeleton-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%; /* 圓形頭像 */
  background: #eee;
  /* ... 同樣加上 shimmer 動畫 ... */
}

實作預覽 (個人資訊)

實作建議

1. 色彩搭配：骨架的灰色不要太深，建議使用 #eee、#f2f2f2 左右的淺灰色，避免壓迫感。
2. 動畫速度：流光動畫不宜過快，通常設定在 1.5s 到 2s 之間最為自然。
3. 佈局一致性：骨架的佈局應與實際載入後的內容「完全一致」，避免內容載入後頁面產生劇烈的跳動（Layout Shift）。
4. 與 API 結合：在實務中，我們會使用一個布林變數（如 isLoading）來切換骨架元件與真實元件：
   • 如果 isLoading == true，則顯示骨架。
   • 如果 isLoading == false，則顯示數據內容。