使用 HTML 和 CSS 创建扫描动画加载器

在Web应用程序中，加载队列较大的情况是普遍的。这意味着需要为用户展示一些样式，以传达加载进度。我们可以使用HTML和CSS来创建精美的扫描动画加载器，这将确保用户继续等待。

实现加载器的主要步骤

1. 定义样式，在其上定义关键帧以控制动画过程的进度。
2. 创建HTML标记，以便可以轻松地将其插入到页面中。
3. 操作动画进展和标记的可见性。

定义样式

在CSS中实现扫描动画非常简单。下面是一些要考虑的关键帧（@keyframe）以及匹配的CSS样式:

.loader {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}

.loader::after {
  content: "";
  display: block;
  position: absolute;
  left: 6px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  animation: loader1 1s ease-in-out infinite;
}

.loader::before {
  content: "";
  display: block;
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  animation: loader2 1s ease-in-out infinite;
  animation-delay: 0.1s;
}

@keyframes loader1 {
  0% {
    transform: scale(0);
    left: 28px;
    top: 28px;
  }
  100% {
    transform: scale(1);
    left: 0;
    top: 0;
  }
}

@keyframes loader2 {
  0% {
    transform: scale(0);
    left: 50px;
    top: 28px;
  }
  100% {
    transform: scale(1);
    left: 0;
    top: 0;
  }
}

在上面的代码段中，“.loader”样式定义了标记的默认样式。然后，“::after”和“::before”伪选择器用于控制小球的动画。关键帧“@keyframes”标记定义了动画在其周期中的行为。

要调整扫描动画加载器的样式，只需更改这些属性的值即可。

创建HTML标记

动画的HTML标记应该是简单的。下面的代码创建了两个动画扫描器，占用64个像素的单位面积，可以添加到网页中的任何位置。

<div class="loader"></div>
<div class="loader"></div>

一个基本的加载器就这么创建了。

操作动画进展和标记的可见性。

我们需要使用JavaScript来操作动画的前进。如果我们正在使用jQuery，请使用以下代码：

$(".loader").fadeIn("slow", function() {
  // Animation complete.
});

当动画完成加载时，它将从网页中消失。请使用以下代码：

$(".loader").fadeOut("slow", function() {
  // Animation complete.
});

结论

使用HTML和CSS创建扫描动画加载器是一个很好的方式来增强Web应用程序。它可以是一个钩子，使用户留在网站上等待更多内容。在上面的代码示例中，我已经演示了如何将这个标记加入到自己的应用程序中，并在需要时操作其可见性。