Css 简明教程
CSS - Loaders
CSS loaders 是在网页加载过程中用来表明加载进度的一些动画效果。这些效果可以利用 CSS 技术实现，并且可以应用于网页的各个元素，例如旋转指示器或加载进度条。CSS 加载器通常用于改善用户体验，可以通过视觉效果来表明内容正在加载或处理。
How to Create a CSS Loader?
要使用 CSS 创建加载器，按照以下步骤操作。
-
Create the HTML Structure: 定义一个外部 div 容器元素来保存加载器内容，和一个内部 div 容器来保存加载器。
-
Style the Loader Container: 为加载器容器设置 * width* 和 * height* 。使用 flex 布局，将加载器元素适当居中在容器内。
-
Style the Loader Element: 还为加载器元素设置高度和宽度。然后根据你需要的加载器的宽度和颜色设置 * border-top* 属性。此外，使用 border-radius 值 50%，来确保创建一个圆形加载器。
-
Add Animation to the Loader: 使用 * CSS animation* 来创建加载效果。你可以利用它添加旋转效果、缩放效果以及任何其他转换效果。
-
Define Keyframes for Animation: 为动画指定 * @keyframes rules* ，详细说明加载器如何随着时间移动或改变。
你可以使用各种颜色组合、形状、图案和动画技巧来设计加载器。使用 CSS 属性来创建你的加载器。
Basic CSS Loaders Example
以下示例演示了如何使用 CSS 创建加载器，就像在上一节中论述过的：
Example
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: space-around;
align-items: center;
height: 150px;
background-color: #e0f7e9;
margin: 0;
}
.loader {
border: 8px solid #e0f7e9;
border-top: 8px solid #34a853;
border-radius: 50%;
width: 60px;
height: 60px;
animation: innerFrame-spin 2s ease infinite;
}
@keyframes innerFrame-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="container">
<div class="loader"> </div>
</div>
</body>
</html>Create Pulsing Dots Loader
脉冲波点加载器在启动系统时常在 Windows 操作系统中使用。我们用伪类 * :nth-child* 在加载器内部设置了六个不同的 div 元素，并为每个元素设置了不同的动画延迟，从而实现了这个效果。
Example
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: space-around;
align-items: center;
height: 150px;
background-color: #e0f7e9;
margin: 0;
}
.PulsingDotsLoader {
display: flex;
justify-content: space-around;
align-items: center;
width: 60px;
height: 60px;
}
.PulsingDotsLoader div {
width: 12px;
height: 12px;
background-color: #34a853;
border-radius: 50%;
animation: PulsingDotsLoader-animation 1.2s ease infinite;
}
.PulsingDotsLoader div:nth-child(1) {
animation-delay: -0.6s;
}
.PulsingDotsLoader div:nth-child(2) {
animation-delay: -0.5s;
}
.PulsingDotsLoader div:nth-child(3) {
animation-delay: -0.4s;
}
.PulsingDotsLoader div:nth-child(4) {
animation-delay: -0.3s;
}
.PulsingDotsLoader div:nth-child(5) {
animation-delay: -0.2s;
}
.PulsingDotsLoader div:nth-child(6) {
animation-delay: -0.1s;
}
@keyframes PulsingDotsLoader-animation {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(0.5);
opacity: 0.3;
}
}
</style>
</head>
<body>
<div class="container">
<div class="PulsingDotsLoader">
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</div>
</div>
</body>
</html>Different Types of Spinning Loaders
这个示例展示了带有多个旋转指示器的加载器。
-
第一个加载器有两个旋转指示器，因为我们定义了属性 * border-top* 和 * border-bottom* 。
-
对于第二个加载器，我们在之前定义的上方和下方值的基础上，定义了 * border-right* ，这就创建了三个旋转指示器加载器。
-
对于第三个加载器，我们为 border 属性定义了四个不同的值，这会创建一个四个旋转指示器加载器。
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
justify-content: space-around;
align-items: center;
height: 200px;
background-color: #f0f0f0;
}
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid blue;
border-bottom: 16px solid blue;
border-radius: 50%;
width: 70px;
height: 70px;
animation: spin 2s linear infinite;
}
.second{
border-right: 16px solid blue;
}
.third{
border-top: 16px solid #ADD8E6; /* Light Blue */
border-right: 16px solid #87CEEB; /* Sky Blue */
border-bottom: 16px solid #1E90FF; /* Dodger Blue */
border-left: 16px solid #4169E1; /* Royal Blue */
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="loader"> </div>
<div class="loader second"> </div>
<div class="loader third"> </div>
</body>
</html>CSS Loaders Using Gradient
CSS * gradients* 可用于通过两个或更多种颜色之间平滑过渡，为加载器元素设计自定义颜色。
Example
<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);
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>
<div class="loader-test"> </div>
</body>
</html>