CSS - 加载器

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>

打印本页