随着网站访问速度的提升，用户对页面加载速度的要求越来越高。为了提高用户体验，在页面加载过程中添加一些动画效果，可以让用户感受到页面在“努力加载中”，从而增加用户的耐心等待。
本文将介绍如何使用 LESS（一种 CSS 预处理语言）实现页面加载动画，我们将使用纯 CSS 动画实现，不需要JavaScript的参与。这不仅能提高页面加载速度，而且能解决小型项目中 JavaScript 带来的额外开销。
LESS 简介
LESS 是一种 CSS 预处理语言，使得 CSS 变得更加简洁易读并且易于维护。LESS 为 CSS 引入了变量、嵌套、函数、依赖等很多有用的功能来增强 CSS 代码的可读性和可维护性。
LESS 通常使用 .less 文件扩展名来标识，有许多 LESS 的编译器可用，如：Less.js，gulp-less 和 grunt-less 等。
实现页面加载动画
在使用 LESS 实现页面加载动画之前，我们需要了解三个核心设置：
animation属性：用于实现动画效果，可用于指定动画的时长、动画的时间函数和执行次数等。@keyframes规则：用于定义动画的关键帧，即指定动画在不同时间点的状态。:before伪元素：用于创建一个元素的副本，并在其前面进行添加，在这个元素上实现动画效果。
步骤 1：创建 HTML 模板
在我们的页面中，我们需要添加一个包含“加载动画”的容器，以便在加载时添加动画效果。下面是一个基本的 HTML 模板，用于创建一个“加载动画”容器：
-- -------------------- ---- -------
--------- -----
------
------
--------- ---- ----------------
----- ---------------- ---------------- ------------------
-------
------
---- --------------------- ---- ------ ---
-------
-------步骤 2：创建 LESS 样式文件
我们将使用 LESS 样式文件来生成 CSS 样式表。在 HTML 模板中，我们已经将样式表的位置设置为 style.less。接下来，我们将在该文件中编写 LESS 样式代码。
在 LESS 样式文件中，我们将创建 .loader 样式类，并使用 :before 伪元素在其前面添加动画容器。下面是我们需要编写的 LESS 样式代码：
-- -------------------- ---- -------
------- -
--------- ---------
----- ----
---- ----
---------- --------------- ------
------ ------
------- ------
-------------- ----
------- ------ ----- -----
-------- -
-------- ---
--------- ---------
---- --------
----- --------
------ --------
------- --------
-------------- ----
------- ------ ----- ------------
---------- ---- -- ------ ---------
-
-
---------- ---- -
---- -
---------- -------------
-
-- -
---------- ---------------
-
-在上面的 LESS 代码中，我们使用 .loader 样式类创建了一个圆形加载动画容器，并使用 :before 伪元素在其前面创建了另一个圆形容器。
在 :before 伪元素中，我们添加了 animation 属性，该属性使用 spin 关键帧动画，其中 spin 是由 @keyframes 规则定义的关键帧。
注意：在 LESS 中，可以使用 & 来引用父选择器，但在生成的 CSS 中不会保留该关系。
步骤 3：编译 LESS 样式文件
我们已经完成了 LESS 样式代码的编写，接下来需要将 LESS 样式文件编译为 CSS 样式表。如果你没有安装 LESS 编译器，请根据你的项目安装 LESS 编译器。
在 LESS 编译器中，我们将 style.less 文件编译为 style.css 文件。
步骤 4：将 CSS 样式表链接到 HTML 页面
在 LESS 样式文件编译为 CSS 样式表之后，我们需要将生成的 style.css 链接到 HTML 页面中。为此，在 HTML 模板中添加以下代码：
<link rel="stylesheet" type="text/css" href="style.css">
步骤 5：预览页面加载动画
现在，我们可以在浏览器中预览我们的页面加载动画了。当页面加载时，我们将在页面顶部看到一个圆形加载动画。
总结
本文介绍了如何使用 LESS 实现页面加载动画的步骤。通过使用 LESS，我们可以轻松地创建动画效果，而无需使用 JavaScript。在实际项目中，我们可以使用类似的技术来改进用户体验和优化页面加载过程。
示例代码：https://codepen.io/assistants/pen/LYLRNzZ
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64618730968c7c53b02e66c9