引言

在页面加载数据时，通常使用占位元素来代替未请求回来数据的元素，用以提升用户体验。而卡片式的占位元素通常称为 Skeleton 即骨架屏。

代码

  1. <div class="card loading">
  2.     <div class="image"></div>
  3.   <div class="content">
  4.     <h4></h4>
  5.       <div class="description"></div>
  6.    </div>
  7. </div>
  1.  :root {
  2.      --loading-grey: #eee;
  3.  }
  5.  /* 卡片基础样式 */
  6.  .card {
  7.      width: 320px;
  8.      background-color: #fff;
  9.      overflow: hidden;
  10.      border-radius: 6px;
  11.      box-shadow: 0px 4px 6px rgba(0, 0, 0, .12);
  12.  }
  14.  .card .image {
  15.      height: 200px;
  16.  }
  18.  .card .content {
  19.      padding: 2rem 1.8rem;
  20.  }
  22.  .card .content h4 {
  23.      margin: 0 0 1rem;
  24.  }
  26.  /* 卡片 loading 样式 */
  27.  .card.loading .content h4 {
  28.      min-height: 1.6rem;
  29.      border-radius: 4px;
  30.      animation-delay: .05s;
  31.  }
  33.  .card.loading .content .description {
  34.      min-height: 4rem;
  35.      border-radius: 4px;
  36.      animation-delay: .06s;
  37.  }
  39.  @keyframes loading {
  40.      to {
  41.          background-position-x: -20%;
  42.      }
  43.  }
  45.  .card.loading .image,
  46.  .card.loading .content h4,
  47.  .card.loading .content .description {
  48.      background-color: var(--loading-grey);
  49.      background: linear-gradient(100deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 60%) var(--loading-grey);
  50.      background-size: 200% 100%;
  51.      background-position-x: 180%;
  52.      animation: 1s loading ease-in-out infinite;
  53.  }

效果

Skeleton 骨架屏.gif

参考资料