一款常用的简单的CSS旋转加载动画,主要运用了不同的色块边框和无限自旋转,可以用在任何加载进度的场景了,喜欢的童鞋请收下吧。
页面的head部分,设置好页面元素和加载动画即可,代码如下:
.loader {
-webkit-animation: spin 1s linear infinite;
animation: spin 1s linear infinite;
border: 5px solid #ddd;
border-top: 5px solid #42a5f5;
border-radius: 50%;
height: 75px;
width: 75px;
}
@-webkit-keyframes spin {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
html, body {
height: 100%;
margin: 0;
}
body {
background-color: #414141;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.container {
margin: 0 auto;
}
页面的body部分,结构相当的简单,div容器里嵌套一个div来放置圆形进度条即可,代码如下:
<div class="container">
<div class="loader"></div>
</div>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791