您的位置：首页 > 其它

loading

2017-12-20 13:45 148 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>你好</title>
</head>
<style>
.kline-loading-main{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.kline-loading {
position: absolute;
top: 45%;
left: 50%;

text-align: center;
width: 150px;
height: 12px;
margin: -6px 0 0 -75px;
}
.kline-loading span{
display: inline-block;
width: 12px;
height: 100%;
margin-right: 3px;
border-radius: 50%;
background: #659aea;
animation: load 1.04s ease infinite;
}
span:last-child{
margin-right: 0;
}
span:nth-child(1){
animation-delay:0.13s;
}
span:nth-child(2){
animation-delay:0.26s;
}
span:nth-child(3){
animation-delay:0.39s;
}
span:nth-child(4){
animation-delay:0.52s;
}
span:nth-child(5){
animation-delay:0.65s;
}

@keyframes load{
0%{
opacity: 1;
}
100%{
opacity: 0;
}
}

</style>
<body>
<div class="kline-loading-main">
<div class="kline-loading">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</body>
<script>
</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： loading 加载圈 load

相关文章推荐

新的分享

章节导航