CSS 加载器是用于指示网页加载过程的动画效果。它们是使用 CSS 实现的，可以应用于网页上的各种元素，例如微调器或进度条。CSS 加载器通常用于通过视觉指示正在加载或处理内容来改善用户体验。
以下 CSS 的属性很少，可用于创建加载器：
- border：用于指定加载器边框的大小和颜色。
- border-radius：用于指定加载器的形状。例如：border-radius：50% 使装载机成为一个圆。
- border-top、border-bottom、border-left 和/或 border-right：用于指示装载机应旋转的方向。
- width：用于指定加载器的宽度。
- height：用于指定装载机的高度。
- animation：用于指定加载器旋转所需的时间。
- @keyframes：@keyframes规则用于指定动画规则。它可以包含 from 和 to 等关键字，分别表示 0% 和 100%;其中 0% 是动画的开始，100% 是动画的完成。
- transform：函数变换用于指定装载机的旋转角度。
- mask / mask-composite：用于创建装载机的最终形状。
您需要在代码中为不支持 animation 和 transform 属性的浏览器添加 -webkit- 前缀。
创建加载器
要使用 CSS 创建加载器，请按照下列步骤操作：
- 创建一个 div 元素来显示加载器。
- 为加载器使用 CSS 样式，为其声明一个类，例如类 .demo-loader。
- 设置装载机的宽度和高度。
- 设置装载机的边框、边框半径或各个侧边框。
- 使用@keyframes规则为加载器设置动画规则。
- 对于不支持 animation 和 transform 属性的浏览器，请使用前缀 -webkit。
- 在 body 标签内的 div 元素中调用此类 （.demo-loader）。
您可以为加载器使用各种颜色组合、形状、图案和动画技巧。使用 CSS 属性来创建您的加载器。
可以使用 CSS 创建无数种加载器。在下一节中，我们将看到几个示例。
CSS 加载器 - 基本示例
以下示例演示了如何使用 CSS 创建加载器，如上一节所述：
<html>
<head>
<style>
.loader-test {
border: 20px solid #110101;
border-radius: 60%;
border-top: 20px solid #f10c18;
border-right: 20px solid yellow;
border-bottom: 20px solid blue;
border-left: 20px solid green;
width: 50px;
height: 50px;
-webkit-animation: spin 5s linear infinite;
animation: spin 5s linear infinite;
}
@keyframes spin {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
</style>
</head>
<body>
<h2>CSS Loader</h2>
<div class="loader-test"></div>
</body>
</html>
CSS 加载器 - 具有 border-right 属性
以下示例演示了仅使用一个边框速记属性 border-right 创建加载器：
<html>
<head>
<style>
.loader-test {
border: 20px solid #110101;
border-radius: 60%;
border-right: 20px solid red;
width: 50px;
height: 50px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
</style>
</head>
<body>
<h2>CSS Loader</h2>
<div class="loader-test"></div>
</body>
</html>
CSS 加载器 - 使用 ：before 和 ：after
以下示例演示了如何使用伪元素（如 ：before 和 ：after）创建加载器：
<html>
<head>
<style>
.loader-test {
width: 100px; /* control the size */
aspect-ratio: 1;
-webkit-mask: conic-gradient(red, yellow, green);
mask: conic-gradient(red, yellow, green);
animation: spin 2s steps(12) infinite;
}
.loader-test,
.loader-test:before,
.loader-test:after{
background: conic-gradient(red, yellow, green);
}
.loader-test:before,
.loader-test:after{
content: "";
transform: rotate(30deg);
}
.loader-test:after{
transform: rotate(60deg);
}
@keyframes spin {
from {transform: rotate(0turn)}
to {transform: rotate(1turn)}
}
div {
margin: 20px;
width: 100px;
height: 100px;
place-content: center;
place-items: center;
}
</style>
</head>
<body>
<h2>CSS Loader</h2>
<div class="loader-test">
</div>
</body>
</html>
始终指定 0% 和 100% 选择器，以获得最佳浏览器支持。
CSS 加载器 - 具有线性渐变
以下是创建加载器的另一个示例：
<html>
<head>
<style>
.loader-test {
width: 50px;
height: 50px;
padding: 10px;
aspect-ratio: 1;
border-radius: 50%;
margin: 20px;
background: linear-gradient(10deg,#ccc,red);
-webkit-mask: conic-gradient(#0000,#000), linear-gradient(#000 0 0) content-box;
mask: conic-gradient(#0000,#000), linear-gradient(#000 0 0) content-box;
-webkit-mask-composite: source-out;
mask-composite: subtract;
animation: load 1s linear infinite;
}
@keyframes load {
to{transform: rotate(1turn)}
}
</style>
</head>
<body>
<h2>CSS Loader</h2>
<div class="loader-test"></div>
</body>
</html>
