在靠近用户的地方部署容器

本工程教育（EngEd）计划由科支持。

在全球范围内即时部署容器。Section是经济实惠、简单而强大的。

免费开始吧。

在Tailwind CSS中使用动画构建一个加载器

7月6日, 2021

装载器/预加载器是你在屏幕上看到的，而页面的其他内容仍在加载。动画在这个组件的设计中发挥了重要作用。它不仅使加载器具有互动性，而且还使你的网页给人以更快的加载响应时间的印象。

虽然有一些外部库可以用来构建这些加载器，但我们将使用Tailwind CSS来构建简单的加载器，只需简单的步骤和更少的代码

我们将在本教程中使用Tailwind CSS和一些自定义CSS。Tailwind为我们提供了低级别的实用类，如animate-spin ，我们将用它来制作我们的加载器。

完成后的加载器将看起来像这样。

先决条件

有HTML和CSS的基本知识。
具有Tailwind CSS的基本知识。

将Tailwind添加到你的项目中

我将假设你已经安装了最新版本的Tailwind。如果你不熟悉Tailwind CSS的工作原理，我建议你通过这篇文章来提高速度。

让我们开始吧!

添加以下内容，并确保链接Tailwind CSS。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Loader</title>
    <link rel="stylesheet" href="./public/css/tailwind.css" />
  </head>
</html>

接下来，添加一个body 标签，并为其设置一些样式。

<body class="flex justify-center items-center bg-gray-900 h-screen"></body>

在body 标签中，我们已经添加了类。

flex,items-center, 和justify-center ，这使我们能够水平和垂直地将我们的表格对齐到中心。
bg-gray-900 将添加一个冷灰色的背景颜色。
h-screen 将设置高度为100%。

现在，让我们添加一个div （父级），它将环绕加载器的圆圈，之后我们将在它下面添加三个divs。

<div
  class="bg-white flex space-x-2 p-5 rounded-full justify-center items-center"
></div>

上面的代码已经创建了一个组件，它将包含三个，小的，彩色的点。

该类。

bg-white 已经给了它一个白色的颜色。
rounded-full 将创建一个圆形，但在我们添加小点之后，最终会变成一个药丸状的形状。
justify-center 和，都是对准丸子的中心。item-center

这样我们就得到了以下结果。

现在让我们在上面的 "无聊 "的圆圈内添加一些东西。如前所述，我们将添加三个div，这将产生三个点。

<div class="bg-blue-600 p-2 w-4 h-4 rounded-full"></div>
<div class="bg-green-600 p-2 w-4 h-4 rounded-full"></div>
<div class="bg-red-600 p-2 w-4 h-4 rounded-full"></div>

我们的加载器现在将看起来像这样。

在上面的片段中，这些点的颜色分别是蓝色、绿色和红色。

三个点之间的空间是通过在父 div 中添加类space-x-2 实现的。它们也是通过在同一个包装器中使用flex 类来进行水平对齐的。

当然，这些点的宽度和高度都是14px，填充为8px。

添加动画

动画时间到了!

对于动画部分，我们将使用Tailwind CSS的animate-bounce 类和一些自定义CSS属性。

让我们开始吧!

像这样在上面的三行代码中添加animate-bounce 。

<div class="bg-blue-600 p-2  w-4 h-4 rounded-full animate-bounce"></div>
<div class="bg-green-600 p-2 w-4 h-4 rounded-full animate-bounce"></div>
<div class="bg-red-600 p-2  w-4 h-4 rounded-full animate-bounce"></div>

现在，我们所有的彩色圆圈都在跳动！但它们是向上跳动的。然而，它们是在同一时间上下跳动的。我想我们应该让它更有趣一点🤔。这可以通过CSS中的动画属性来实现。

让我们根据每个圆圈的颜色给它一个类名，以便更快地参考。

<div
  class="bg-blue-600 p-2  w-4 h-4 rounded-full animate-bounce blue-circle"
></div>
<div
  class="bg-green-600 p-2 w-4 h-4 rounded-full animate-bounce green-circle"
></div>
<div
  class="bg-red-600 p-2  w-4 h-4 rounded-full animate-bounce red-circle"
></div>

经过上面的步骤，我们现在可以在头部的一个<style> 标签里面写上类的选择器。然后，我们将为所有选择器添加animation-delay 属性。

另外，你也可以创建一个外部样式表文件，并将其链接到HTML文件中。

我们的代码应该看起来像这样。

<style>
	.blue-circle{
		animation-delay: 0.1s;
	}
	.green-circle{
		animation-delay: 0.2s;
	}
	.red-circle{
		animation-delay: 0.3s;
	}
</style>

上面的代码已经添加了每个圆圈在弹跳前的等待时间。例如，红色的圆圈要等0.3秒才弹起。

它也在等待绿色圆圈的反弹。另一方面，绿色的圆圈会等待蓝色的圆圈反弹后再做。

这就是我们非常简单的加载器，只有几个简单的步骤!

总结

在这篇文章中，我们已经通过使用Tailwind CSS和一些自定义CSS创建一个简单的动画加载器。动画和加载器对用户体验很重要。

如果大部分组件都有动画，网页访问者可能会更频繁地访问该页面。

我希望你觉得这个教程对你有帮助!

编码愉快!

同行评审贡献者：。Peter Kayere