CSS实现一个等待加载器

蓝天
html+js
2020-03-08 14:14:25

简介首先，我们需要创建3个点，以创建一个加载器<div class = "loader"> <div></div> <div></div> <div></div></div>添加一些CSS以使div填满整个屏幕。将加载程序设置为

首先，我们需要创建3个点，以创建一个加载器

<div class = "loader">  
    <div></div>
    <div></div>
    <div></div>
</div>

添加一些CSS以使div填满整个屏幕。

将加载程序设置为flex-box并将加载程序中的所有div设置为

中心垂直使用 align-items: center
水平使用中心 justify-content: center;

body {
margin : 0;  
}
loader {
width : 100vw;
height : 100vh;
display : flex;
justify-content: center;
align-items : center;
}

现在，通过将边界半径设置为50％，将所有div转换为点或圆形

loader > div {
width: 20px;
height: 20px;
background: #8385aa;
border-radius: 50%;
margin : 3px;
}

现在让我们使用关键帧添加动画。在关键帧中，我们定义to动画的状态（完成状态）。

在这个to状态下，我们将动画定义为要翻译的div x -20px和不透明度，0以便它产生淡化效果。

@keyframes loader {
to {
opacity: 0.1;
transform: translate(0, -20px);
background : pink;
}
}

现在将动画添加到加载器内的div。还要为每个div添加延迟，使其看起来很棒。

.loader > div {
width: 20px;
height: 20px;
background: #8385aa;
border-radius: 50%;
margin : 3px;
animation: loader 0.6s infinite alternate;
}
 
.loader > div:nth-child(2) {
animation-delay: 0.2s;
}
.loader > div:nth-child(3) {
animation-delay: 0.4s;
}

就是我们在css中开发了一个超级简单的加载器。不会弄gif图，只能看个大概，哈哈...