如何创建加载器！

各位创作者们，

想给应用添加加载器，却不知从何入手？那就来试试吧！

如果您更喜欢观看视频版本，请点击此处：

1.HTML结构。

创建一个包含三个点的加载器容器：

<div class="loader-container">
      <div class="dot d1"></div>
      <div class="dot d2"></div>
      <div class="dot d3"></div>
</div>

2. 设置加载器的样式。

将加载器样式设置为position:absolute，并使其占据视口的整个宽度和高度。然后，确保三个点位于页面中央：

*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: #fff;
  font-family: Arial, Helvetica, sans-serif;
}

.loader-container {
  position: absolute;
  background: #f1f1f1;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 1s ease-in-out;
}

3. 为加载器制作动画。

现在，将圆点的样式设置为清晰可见（宽度和高度均为 25px），并将其颜色设为黑色。最后，添加一个动画，该动画将立即创建。

.dot {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #000;
  margin: 0 10px;
  animation: loader infinite 0.3s alternate;
}

动画的关键是给第二和第三个点的动画添加延迟：

.d2 {
  animation-delay: 0.05s;
}
.d3 {
  animation-delay: 0.1s;
}

最后，使用关键帧创建动画：

@keyframes loader {
  100% {
    transform: translateY(-30px);
  }
}

您已经在 CSS 中创建了一个简单但有效的加载器，做得好！

来看看我的Youtube 频道吧：https://www.youtube.com/c/TheWebSchool

再见！

恩佐。

文章来源：https://dev.to/ziratsu/how-to-create-a-loader-2f7h