CSS加载动画:如何使他们+例子

当访问者点击你网站上的按钮或链接时，他们希望看到一些反馈。这个动画或通知让用户知道他们的请求已经收到，网站正在加载相关信息。

但是，如果什么都没有发生，大多数人会认为链接是坏的或你的网站有问题。在他们意识到你的网站已经在处理他们的请求之前，他们就会快速导航离开。

为防止这些类型的反弹，您需要将加载动画编程到按钮和链接中。装载机让人们知道已收到其请求并正在参加。这是一个基本组成部分用户体验(UX)设计如果没有它，访问者就会感到沮丧，然后离开你的网站，再也不会回来。

如果您的网站没有装载机，您可以使用CSS创建此动画。在这篇文章中，我们将解释如何做到这一点，并提供一些符号，您的团队可以用作灵感。

什么是加载动画?

加载动画是通知，可让用户放心系统仍在处理其请求。当用户单击链接或按钮时，将显示动画，直到加载过程完成。

一些动画有进度条，指示数据或内容加载需要多长时间。这给了用户一个实时的更新——或分心——让等待变得更容易忍受。

有许多不同的工具可以构建加载动画。但是，最实用的是CSS之一。让我们探索为什么在下面的部分。

用于加载动画的CSS

要清除，您可以使用像JavaScript（JS）这样的其他编码语言或加载程序的简单动画GIF。

然而，CSS有一些优势，使其成为实现这一目的的实际解决方案:

1. 它很容易编辑。您可以快速调整持续时间，颜色，速度和其他动画元素。
2. 它在变化量表时不会丢失质量。
3. 动画与图形处理单元（GPU）加速（比JS更快）快速且平滑。
4. 可以使用动画播放状态属性暂停。

某些浏览器(如Internet Explorer 9和Opera Mini)可能不支持CSS加载动画。如果你不确定它是否被支持，像现代人可以告诉你他们是不是。对于不支持CSS加载动画的浏览器，可以使用GIF。

现在我们在您应该使用CSS（当您不应该的时候）进行解释，让我们看一下使用此编码语言构建的一些加载动画。

CSS加载动画的示例

您可以使用CSS创建各种加载动画。这是五个最常见的。

1.无限加载动画

无限的加载动画要求用户等待，但没有说明多长时间。当等待时间未知或很短时可以使用。

图像源码

2.确定加载动画

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

图像源码

3.装载旋转器

旋转器是一种常见的无限加载动画类型。这些指示页面正在加载，动画沿圆形轨道移动。在加载页面之前，动画将继续在此圆形轨道上。

图像源码

4.进度栏

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

图像源码

5.骨架的屏幕

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

图像源码

现在我们已经看到了一些例子，让我们了解如何将它们放在下面的部分中的行动。

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

制作一个简单的CSS加载动画很容易。W3Schools共享具有多个自定义选项的基本示例。

首先，定义CSS加载动画的位置将在HTML中物理出现：

图像源码

接下来，创建CSS类以自定义CSS加载动画：

图像源码

在该示例中，“边框”属性定义了加载器边框的大小和颜色。边界半径属性使装载机成为圆圈。

在边界内旋转的蓝色“丝带”是由border-top属性定义的。如果你想添加更多的旋转色带，你可以包括“border-bottom”，“border-right”和“border-left”属性。

“宽度”和“高度”属性定义了加载动画的大小。

最后，“动画”属性使旋转器开始并以2秒的速度无限期地继续。

就是这样。但是请记住，你的CSS加载动画并不需要那么基础。就像所有CSS的东西一样，你的想象力控制着各种可能性。

CSS加载动画最佳实践

加载动画应该仔细考虑它对用户体验的影响。因此，考虑以下技巧来创建一个有效的CSS加载动画。

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

无论你的纺丝猫动画可能看多么可爱，如果它持续太长，用户将会变得不耐烦。保持用户的期望，并确保您的动画尽可能短的时间。用户将欣赏快速装载时间，而不是美丽的旋转器。

2.缓解等待的痛苦。

如果您向用户提供有趣的东西来查看，那么等待将不那么痛苦。一个吸引人的动画将吸引注意力并保持用户忙碌。

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

虽然这不是一个营销活动的地方，但重要的是保持你的加载器品牌。使用你公司的调色板raybet电子竞技和语调来保持与你的品牌一致。

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

用户需要等待的原因并不总是显而易见的，告诉他们可以减少等待期间的摩擦。你不必过于具体，相反，简单的语句，如“请等一下，我们给你设置”或“等一下，我们取回你新创建的文档”就可以了。

5.提供等待时间估计。

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

将CSS加载动画加入您的网站

CSS加载动画可帮助用户使用工具或网站患者。它让他们知道系统没有崩溃，告诉他们页面将需要多长时间加载，并通过提供一些东西来保持他们的注意力。

创建CSS加载动画是非常易于轻松的。你需要的只是一些基本网络设计知识还有一点灵感。