很好看的css3 Loading

最新推荐文章于 2024-08-19 18:43:19 发布

lucky芬

最新推荐文章于 2024-08-19 18:43:19 发布

阅读量477

点赞数

分类专栏：练手小案例

练手小案例专栏收录该内容

42 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3 loading</title>
    <style type="text/css">
    *{
        margin: 0px;
        padding: 0px;
        border:0px;
    }
    html,body{
        min-height: 100%;
    }
    body{
        background: radial-gradient(#eee,#444);
    }
    .loader{
        position: absolute;
        top:0;
        bottom: 0;
        left: 0;
        right: 0;
        margin:auto;
        width:175px;
        height: 100px;
    }
    .loader span{
        display: block;
        background: #ccc;
        width:7px;
        height: 10%;
        border-radius: 14px;
        margin-right: 5px;
        float: left;
        margin-top: 25%;
    }
    .loader span:last-child{
        margin-right: 0;
    }
    .loader span:nth-child(1){
        animation: load 2.5s 1.4s infinite linear;
    }
    .loader span:nth-child(2){
        animation: load 2.5s 1.2s infinite linear;
    }
    .loader span:nth-child(3){
        animation: load 2.5s 1s infinite linear;
    }
    .loader span:nth-child(4){
        animation: load 2.5s 0.8s infinite linear;
    }
    .loader span:nth-child(5){
        animation: load 2.5s 0.6s infinite linear;
    }
    .loader span:nth-child(6){
        animation: load 2.5s 0.4s infinite linear;
    }
    .loader span:nth-child(7){
        animation: load 2.5s 0.2s infinite linear;
    }
    .loader span:nth-child(8){
        animation: load 2.5s 0s infinite linear;
    }
    .loader span:nth-child(9){
        animation: load 2.5s 0.2s infinite linear;
    }
    .loader span:nth-child(10){
        animation: load 2.5s 0.4s infinite linear;
    }
    .loader span:nth-child(11){
        animation: load 2.5s 0.6s infinite linear;
    }
    .loader span:nth-child(12){
        animation: load 2.5s 0.8s infinite linear;
    }
    .loader span:nth-child(13){
        animation: load 2.5s 1s infinite linear;
    }
    .loader span:nth-child(14){
        animation: load 2.5s 1.2s infinite linear;
    }
    .loader span:nth-child(15){
        animation: load 2.5s 1.4s infinite linear;
    }
    @keyframes load{
        0%{
            background: #ccc;
            margin-top: 25%;
            height: 10%;
        }
        50%{
            background: #444;
            height: 100%;
            margin-top: 0%;
        }
        100%{
            background: #ccc;
            height: 10%;
            margin-top: 25%;
        }
    }
    </style>
</head>
<body>
<div class="loader">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>
</body>
</html>