loading

最新推荐文章于 2018-12-06 13:23:28 发布

y_qingcheng

最新推荐文章于 2018-12-06 13:23:28 发布

阅读量159

点赞数

分类专栏：加载文章标签： loading 加载圈 load

本文链接：https://blog.csdn.net/y_qingcheng/article/details/78852274

版权

加载专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!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>

y_qingcheng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
loading

html>html lang="en">head> meta charset="UTF-8"> title>你好title>head>style> .kline-loading-main{ position: absolute; top: 0; bottom: 0; left: 0; r
复制链接

扫一扫