CSS 加载动画：如何制作它们 + 15 个示例

因为专注，所以专业

网站建设网站设计常见问题小程序

CSS 加载动画：如何制作它们 + 15 个示例

当访问者点击您网站上的链接或按钮时，他们希望看到某种反馈。但是，如果什么都没有发生，大多数人会得出结论，有些事情是错误的。他们会在意识到您的网站正在处理他们的请求之前迅速离开。
加载动画可以通过让人们知道他们的请求已被接收并正在处理来帮助防止这些类型的反弹并提供更好的用户体验 (UX)。
虽然一些网站建设者或主题会提供内置动画功能，但您可以使用 CSS 创建自己的。在这篇文章中，我们将解释如何使用一些基本的网页设计知识来做到这一点，并提供一些示例，您的团队可以将其用作灵感。

什么是加载动画？

加载动画是向用户保证系统仍在处理他们的请求的通知。当用户单击链接或按钮时，动画会一直显示，直到加载过程完成。
某些动画具有进度条，指示加载数据或内容需要多长时间。这为用户提供了实时更新或分心，让等待变得更容易忍受。
有许多不同的工具可以构建加载动画。然而，最实用的方法之一是 CSS。让我们在下面的部分中探讨原因。

用于加载动画的 CSS

明确地说，您可以为您的加载程序使用另一种编码语言，如 JavaScript (JS) 或简单的动画 GIF。
但是，CSS 有一些优势，使其成为实现此目的的实用解决方案：

编辑很容易。您可以快速调整持续时间、颜色、速度和其他动画元素。
当它改变比例时，它不会失去质量。
通过图形处理单元 (GPU) 加速（比 JS 更快），动画既快速又流畅。
可以使用 animation-play-state 属性暂停。

某些浏览器可能不支持 CSS 加载动画，例如 Internet Explorer 9 和 Opera Mini。如果您不确定它是否受支持，Modernizr 之类的工具可以告诉您是否受支持。对于不支持 CSS 加载动画的浏览器，您可以改用 GIF。
既然我们已经解释了什么时候应该使用 CSS（什么时候不应该），让我们看看一些使用这种编码语言构建的加载动画。

CSS 加载动画示例

您可以使用 CSS 创建多种加载动画。以下是五种最常见的类型，每种类型都有多个示例。

1.无限加载动画

无限加载动画要求用户等待而不指示多长时间。当等待时间未知或非常短时，可以使用它们。
css加载动画：无限加载点示例

图片来源

带代码的无限加载动画示例

2.确定加载动画

确定加载动画指示加载页面需要多长时间。这些可能提供特定的百分比或数字，但不是必须的。它们也可以是视觉估计，例如绘制的圆圈或填充的条形。
css加载动画：沙漏加载示例

图片来源

使用代码确定加载动画示例

3. 进度条

进度条是一种特定类型的确定加载动画。它们是线性的而不是圆形的，并且通常以百分比、体积或分数的形式告诉用户剩余的时间。

图片来源

带代码的进度条示例

4. 骨架屏

骨架屏幕从空白页面开始，其中包含您将看到的内容的占位符。元素逐渐显示，直到页面完全加载。

图片来源

带代码的骨架屏幕示例

5. CSS 加载微调器

CSS 加载微调器指示页面正在加载为沿圆形轨道移动的动画。动画将在此循环轨道上继续播放，直到页面加载完毕。
由于这些是一种常见的无限加载动画类型，让我们来看看下面的几个例子。

缓入缓出加载微调器

下面的加载微调器的动画计时属性设置为“渐进渐出”，这意味着它既有慢速开始也有慢速结束。
css 加载动画：缓入缓出加载微调器示例

图片来源

彩虹加载微调器

下面的加载微调器由一个父 div 和几个子 div 组成。每个 div 都使用不同的 CSS 属性设置样式，因此它们具有不同的颜色和大小，并在不同的时间开始它们的动画序列。

图片来源

加载带有动画文本的微调器

下面的加载微调器动画以两秒的速度无限旋转。它还包含一个带有“Loading”字样的 div，当加载器旋转时，该 div 也被动画化为完全透明和完全不透明。
css 加载动画：加载带有动画文本示例的微调器

图片来源

SVG 加载微调器

下面的加载微调器是一个由三个“破折号”组成的 SVG 圆圈，从点开始，然后扩展直到它们形成一个圆圈。动画无限循环。
css 加载动画：SVG 加载微调器示例

图片来源

梯度加载微调器

下面的加载微调器的独特之处在于它的渐变背景颜色。它还包含 span 元素，这些元素有自己的渐变背景颜色。
css 加载动画：渐变加载微调器示例

图片来源

使用代码加载 Spinner 示例

现在我们已经看到了一些示例，让我们在下面的部分中了解如何将它们付诸实践。

如何在 CSS 中制作简单的加载动画

制作一个简单的 CSS 加载动画很容易。让我们来看看如何制作以下加载微调器。

首先，在 HTML 中添加一个 div 并使用类名“loader”定义它。

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

接下来，使用 CSS 类选择器.loader来自定义 CSS 加载动画。您可以定义多个属性，如下面的规则集所示。

.loader {
  margin: auto;
  border: 20px solid #EAF0F6;
  border-radius: 50%;
  border-top: 20px solid #FF7A59;
  width: 200px;
  height: 200px;
  animation: spinner 4s linear infinite;
}

@keyframes spinner {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

让我们在下面解释每个属性是如何工作的。
该CSS margin属性设置为“自动”，以中心页面上的装载机。
该CSS border属性定义的大小，样式，和装载机的边框颜色（显示为圆形的轨道，橙色的“丝带”，围绕移动）。
在CSS边界半径属性设置为50％，使装载机成一个圆圈。
border-top 属性定义了加载器本身（橙色“功能区”）的大小、样式和颜色。请注意，它与边框具有相同的大小和样式——只是颜色不同。您还可以定义 border-bottom、border-right 和 border-left 属性。设置 border-bottom 属性将添加一个单独的旋转“功能区”。设置 border-right 或 -left 属性将延长一个功能区。
width 和 height 属性定义加载动画的大小（整个圆）。
最后，动画属性定义了名称、持续时间、时间和迭代帐户。在此示例中，微调器设置为从开始到结束以相同速度移动 4 秒，然后无限循环。
剩下要做的就是设置动画的关键帧。这些将描述加载器在动画序列期间的给定时间应如何呈现。确保使用动画属性中定义的动画名称（在本例中为“spinner”。）
本例中只定义了两个关键帧。第一个发生在 0% 或动画序列的第一个时刻。装载机配置为旋转 0 度。第二个关键帧出现在 100%（即动画序列的最后时刻）。装载机配置为旋转 360 度，因此“色带”从圆圈的顶部开始，并在四秒钟内完成完整的旋转。
就是这样。但请记住，您的 CSS 加载动画不必那么基本。像所有 CSS 一样，您的想象力控制着可能性。
查看24 个创意独特的 CSS 动画示例中的一些最酷的示例，以激发您自己的灵感。

CSS 加载动画最佳实践

加载动画应该仔细考虑它如何影响用户体验。因此，请考虑以下提示来创建有效的 CSS 加载动画。

1. 最好的加载动画花费的时间最少。

无论您的旋转猫动画看起来多么可爱，如果持续时间过长，用户都会变得不耐烦。牢记用户的期望，并确保您的动画花费尽可能少的时间。与漂亮的微调器相比，用户会更喜欢快速的加载时间。

2.减轻等待的痛苦。

如果你为用户提供一些有趣的东西，等待就会不那么痛苦。引人入胜的动画将吸引注意力并使用户保持忙碌。

3. 你的动画是你品牌的一部分。

虽然这不是营销活动的场所，但保持您的装载机品牌很重要。使用您公司的调色板和语气来与您的品牌保持一致。

4. 让用户知道等待的原因。

用户为什么需要等待并告诉他们可以减少等待期间的摩擦并不总是很明显。您不必过于具体，相反，诸如“请稍等，我们正在为您设置”或“等一下，我们正在获取您新创建的文档”之类的简单语句效果很好。

5. 提供等待时间估计。

时间估计设定了预期并帮助用户耐心等待。您可以将此估计值显示为百分比或进度的视觉表示。

向您的网站添加 CSS 加载动画

CSS 加载动画可帮助用户对您的工具或网站保持耐心。它让他们知道系统没有崩溃，告诉他们加载页面需要多长时间，并通过提供一些东西来保持他们的注意力。最好的部分？使用一些基本的网页设计知识可以轻松创建加载动画。

重庆分公司，新征程启航