加载闪烁！

当我听到“加载闪光”这个词时，我以为这是 Web 开发中引入的一些新奇玩意儿。但事实证明，我们在日常网页浏览中已经注意到了它。

当网络速度较慢导致 DOM 内容加载缓慢时，我们通常会显示一个加载图标/gif 来指示内容正在加载。
老式的加载器显示方式如下：

上述情况很好地让用户知道内容正在加载。
但是，这并不是一个良好的用户体验。
那么，我们如何才能获得更好的用户体验呢？

骨架屏幕来救援。

我们可以使用应用程序的示例布局来代替显示加载图标，该布局指示应用程序完全加载后内容的放置方式和位置。

在 Facebook 上点赞

这就是“加载闪光！”

上述布局包含多个单独的部分，用于显示个人资料图片、描述和标题。这是一个通用模板，可在内容加载时显示。

让我们学习如何在我们的应用中实现这一点

我们将仅使用 CSS 和 HTML 来实现它的完整代码。

完整代码可在codepen获取

输出：

样板：

以下 HTML 包含一个布局，其中包含个人资料图片和一些评论。


 jsx
<div class="card br">
   <div class="wrapper">
      <div class="profilePic animate"></div>
      <div class="comment br animate w80"></div>
      <div class="comment br animate"></div>
      <div class="comment br animate"></div>
   </div>
<div>


 css
.br {
  border-radius: 8px;  
}
.w80 {
   width: 80%;
}
.card {
  border: 2px solid #fff;
  box-shadow:0px 0px 10px 0 #a9a9a9;
  padding: 30px 40px;
  width: 80%;
  margin: 50px auto;
}
.profilePic {
  height: 65px;
  width: 65px;
  border-radius: 50%;
}
.comment {
  height: 10px;
  background: #777;
  margin-top: 20px;
}

.card该类提供类似卡片的背景。

扩展动画：


 css
.wrapper {
  width: 0px;
  animation: fullView 0.5s forwards linear;
}

@keyframes fullView {
  100% {
    width: 100%;
  }
}

.wrapper有一个自定义的扩展动画，其中我们将宽度从 0 增加到 100%，同时显示闪光。

闪光：


 css
.animate {
   animation : shimmer 2s infinite;
   background: linear-gradient(to right, #eff1f3 4%, #e2e2e2 25%, #eff1f3 36%);
   background-size: 1000px 100%;
}

.animate该类有一个名为“shimmer”的自定义动画，持续时间为 2 秒，计数为无限（不断重复）。

background是linear-gradient。我们需要使用渐变，因为它与前面和后面的其他颜色融合。
这里我们指出从左到右有一个渐变，25% 之间的颜色是#e2e2e2（较深的阴影），而在所有其他地方（0 到 4% 和 36% 到 100%）它是#eff1f3（实际背景颜色）
background-size有助于提供width背景height。


 css
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

在我们的自定义shimmer动画中，我们定义了它在动画开始和动画结束时应该如何出现。
因此，背景的位置从其宽度的负最大值移动到正最大值。
自从我们使用infinite它以来，它会在每个给定的持续时间（2 秒）内不断发生。

别忘了点击follow按钮：P

完整代码可在codepen获取

就这些了，伙计们：）

鏂囩珷鏉ユ簮锛�https://dev.to/dhilipkmr/the-loading-shimmer-29dc