Css 简明教程
CSS - Loaders
CSS loaders 是在网页加载过程中用来表明加载进度的一些动画效果。这些效果可以利用 CSS 技术实现，并且可以应用于网页的各个元素，例如旋转指示器或加载进度条。CSS 加载器通常用于改善用户体验，可以通过视觉效果来表明内容正在加载或处理。
CSS loaders are animation effects that are used to indicate the loading process of a webpage. They are implemented using CSS and can be applied to various elements on a webpage, such as a spinner or a loading progress. CSS loaders are commonly used to improve user experience by visually indicating that content is being loaded or processed.
Sample of CSS Loaders
在这里你可以看到 CSS 加载器是什么，你可能在不同的网站上看到过这种加载动画。
Here you can see what is a CSS loader, you may have seen these kind of loading animation on different websites.
How to Create a CSS Loader?
要使用 CSS 创建加载器，按照以下步骤操作。
To create a loader in CSS, follow the below mentioned steps steps.
-
Create the HTML Structure: Define a outer div container element to hold loader content and a inner div container for loader.
-
Style the Loader Container: Set up the width and height for loader container. Use flex layout to center loader elements properly inside the container.
-
Style the Loader Element: Set up height and width for loader element also. Then set up border-top property as per width and color of loader you want. Also use border-radius value as 50% to ensure a circular loader.
-
Add Animation to the Loader: Use CSS animation to create the loading effect. With this you can add rotation effect, scaling, or any other transformations.
-
Define Keyframes for Animation: Specify the @keyframes rules for your animation, detailing how the loader should move or change over time.
你可以使用各种颜色组合、形状、图案和动画技巧来设计加载器。使用 CSS 属性来创建你的加载器。
You may use various color combinations, shape, patterns and animation tricks for the loader. Play around with CSS properties to create your loader.
Basic CSS Loaders Example
以下示例演示了如何使用 CSS 创建加载器，就像在上一节中论述过的：
Following example demonstrates creating a loader using CSS as discussed in the previous section:
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 元素，并为每个元素设置了不同的动画延迟，从而实现了这个效果。
The pulsing dots loader is commonly used in windows operating system while booting the system. We made this using six div elements inside loader each set with different animation delay using pseudo-class :nth-child.
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
这个示例展示了带有多个旋转指示器的加载器。
This example shows loaders with multiple spinners.
-
First loader have two spinners, because we defined properties border-top and border-bottom.
-
For second loader we defined border-right along with previously defined top and bottom values, this make three spinner loader.
-
And for third loader we defined four different values for border property, which makes a four spinner loader.
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* 可用于通过两个或更多种颜色之间平滑过渡，为加载器元素设计自定义颜色。
CSS gradients can be used to design custom colors for loader elements by creating a smooth transition between two or more colors.
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>