CSS Loader

引言

当访问者访问我们的网页并点击按钮时，他们期望开发人员提供一些反馈。如果开发人员没有提供反馈，用户可能会认为出了问题。此外，他们可能会在事情发生之前迅速离开网站。

我们可以借助加载动画来避免这些情况。借助加载动画，我们可以提供更好的用户界面，让人们知道后台正在进行一些进程。

什么是加载动画？

在 CSS 中，加载动画不过是一种通知用户系统仍在处理其请求的通知。当用户点击按钮直到请求完成时，动画会加载。

此外，一些动画具有进度条，指示请求完成的剩余时间。这还提供了实时更新，减少了用户的无聊感。有许多工具可以创建加载动画。但 CSS 是创建加载动画的最佳实践。

CSS 中的加载动画

我们还可以借助其他语言，例如 Javascript 或简单的 gif 加载器来创建动画加载器。但是，CSS 提供了一些优势来创建动画加载器。这些优势如下。

1. 我们可以轻松编辑它。我们还可以快速编辑持续时间、颜色、速度和其他动画元素。
2. 如果我们改变动画的比例，它不会失去质量。
3. 如果我们使用图形处理单元，那么它会使动画快速流畅，
4. 我们还可以借助 animation-play-state 属性暂停动画。

某些浏览器可能不支持加载动画。例如 Internet Explorer 9 和 Opera Mini。如果浏览器不支持加载动画，我们必须使用 GIF。

CSS 加载动画示例

互联网上有许多不同类型的加载动画。让我们看一些示例。

1. 无限加载动画

这些动画要求用户等待而不提供等待时间。当等待时间未知或等待时间非常短时，我们可以使用这种类型的动画。

无限加载动画示例代码

代码

输出

2. 确定性加载动画

此加载动画显示加载网页所需的总时间。它还以数字或百分比显示总时间。它也可以显示为绘制的圆形或填充的条形。

输出

3. 进度条

这些是可以通过 CSS 创建的一些特定动画。它们看起来像线性而不是圆形。它还告诉用户完成任务还剩下多少时间。剩余时间以体积、分数或百分比显示。

输出

进度条示例代码

让我们借助 HTML 和 CSS 创建一个进度条。

代码

输出

4. 骨架屏

骨架屏看起来像一个包含占位符的空白屏幕。

骨架屏示例代码

让我们借助 HTML 和 CSS 创建一个骨架屏。

代码

输出

5. CSS 加载旋转器

这种类型的加载动画表示动画以圆形运动加载。动画一直持续到页面加载过程完成。CSS 中有许多类型的加载旋转器。让我们讨论其中的一些。

• 缓入缓出加载旋转器

此加载动画具有一个属性，其中包含动画时间为“缓入缓出”。这意味着它既有慢速启动又有慢速结束。

代码

输出

• 彩虹加载旋转器

这种动画样式包含一个父 div 和几个子 div。每个 div 都将使用彩虹色进行样式设置。

代码

输出

• SVG 加载旋转器

此加载旋转器是一种 SVG 旋转器，它由三个破折号创建。此动画以点开始并扩展直到形成一个圆。此动画是一个无限循环。

• 渐变加载旋转器

每当需要独特的加载旋转器时，我们都应该选择渐变加载旋转器。它是在 span 元素的帮助下制作的。这些 span 元素具有其背景颜色。

• 带动画文本的加载旋转器

这种动画速度以 2 秒的速度旋转。它还有一个 div 标签，其中包含文本“加载中”。

代码

输出

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

有一些简单的步骤可以为我们的网页创建简单的加载动画。

1. HTML 结构

第一步，我们必须为动画创建网页结构。HTML 代码如下。

HTML 代码

2. CSS 样式

创建 HTML 结构后，我们必须进入下一步。在下一步中，我们必须借助 CSS 提供一些样式。

CSS 代码

结合两个代码将使完整的代码看起来像下面这样。

完整代码

输出

CSS 加载动画最佳实践

在创建加载动画时，我们应该非常小心。以下是创建 CSS 加载动画的一些技巧。

最好的加载动画花费的时间最少。当我们创建加载动画时，如果持续时间太长，用户会有些耐心。开发人员必须记住，动画应该尽可能短。完成此操作后，用户会欣赏快速加载时间。

• 减轻等待的痛苦。

如果开发人员想在他的网页上提供一些有趣的东西，等待的痛苦会减轻。这个动画会吸引注意力，并让用户保持忙碌。

• 您的动画是您品牌的一部分。

有比这更好的营销活动场所，但建议保留品牌上的徽标。

• 让用户知道等待的原因。

加载动画的主要目的是减少用户的等待时间。因此，为了减少用户的无聊感，我们不应该使用简单的语句，例如“请稍候，我们正在为您设置”或“请稍等，我们正在获取您新创建的文档”。