基本信息
源码名称：CSS3 自制 loading 动画效果
源码大小：1.66KB
文件格式：.html
开发语言：CSS
更新时间：2019-03-18
   友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

     嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　
   源码介绍 

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>CSS3 自制 loading 动画效果</title>
</head>
<body>
 
<style>
    .loading-wrap {
        position: fixed;
        z-index: 100;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background: #eee;
        line-height: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .loading-circle {
        position: relative;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1px 2px rgba(0,0,0,.1);
        box-sizing: border-box;
    }
    .loading-circle-anim {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 24px;
        height: 24px;
        margin-left: -12px;
        margin-top: -12px;
        border-radius: 50%;
        border: 2px solid #888;
        box-sizing: border-box;
        animation: loading 2s ease-out infinite;
    }
    .loading-circle-anim:after {
        content: " ";
        z-index: 1;
        position: absolute;
        background: #fff;
        top: -5px;
        left: 58%;
        bottom: 0;
        width: 50%;
        height: 30px;
    }
    @keyframes loading {
        0% {
            transform: rotate(0deg);
        }
        50% {
            transform: rotate(360deg);
        }
        100% {
            transform: rotate(720deg);
        }
    }
</style>
 
<div class="loading-wrap">
    <div class="loading-circle">
        <div class="loading-circle-anim"></div>
    </div>
</div>
 
</body>
</html>