CSS加载器是用于指示网页加载过程的动画效果。它们是使用 CSS 实现的，可以应用于网页上的各种元素，例如旋转器或进度条。 CSS 加载器通常用于通过直观地指示正在加载或处理内容来改善用户体验。
CSS 的以下属性很少可用于创建加载器:
border:用于指定加载器边框的大小和颜色。
border-radius:用于指定加载器的形状。例如:border-radius:50% 使加载器成为一个圆形。
border-top, border-bottom, border-left 和 border-right:用于指示加载器应旋转的方向。
width:用于指定加载器的宽度。
height:用于指定加载器的高度。
height:用于指定加载器的高度。 htm" target="_blank">动画:用于指定加载程序旋转所需的时间。
@keyframes:@keyframes规则用于指定动画规则。可以包含from、to等关键字，分别表示0%和100%；其中 0% 表示动画开始，100% 表示动画完成。
transform :函数transform用于指定加载器的旋转角度。
mask / mask-composite:用于创建加载程序的最终形状。
您需要在代码中添加 -webkit- 前缀不支持动画和变换属性的浏览器。
创建加载程序
要使用 CSS 创建加载程序，请按照下列步骤操作:
创建一个 div 元素来显示加载器。
为加载器使用 CSS 样式，为其声明一个类，例如 class .demo-loader。
设置border、border-radius 或加载器的各个侧边框。
设置加载器的动画规则，使用 @keyframes 规则。
在 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 加载器</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 加载器</h2>
<div class="loader-test"></div>
</body>
</html> CSS 加载器: 使用 :before 和 :after
<html>
<head>
<style>
.loader-test {
width: 100px; /* 控制宽度 */
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 加载器</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 加载器</h2>
<div class="loader-test"></div>
</body>
</html>