首次加载动画

1.JS逻辑

<script type="text/javascript">
    window.onload = function(){
        setTimeout(function(){
             $(".loading").fadeOut();
        },1000);
    };
    if(getCookie("id") == 1){
        //alert(123)
        document.querySelector(".loading").style.display = "none";
    }else {
        document.querySelector(".loading").style.display = "block";
        //alert(456)
    }
    setCookie("id","1",1);
    console.log(getCookie("id"))
    function getCookie(cname){
        var name = cname + "=";
            var ca = document.cookie.split(';');
            for(var i=0; i<ca.length; i++){
            var c = ca[i].trim();
            if (c.indexOf(name)==0) return c.substring(name.length,c.length);
        }
        return "";
    }
    function setCookie(cname,cvalue,exdays){
        var d = new Date();
        d.setTime(d.getTime()+(exdays*24*60*60*1000));
        var expires = "expires="+d.toGMTString();
        document.cookie = cname+"="+cvalue+"; "+expires;
    }
</script>

2.CSS样式

<style>

.circle {
    height: 10px;
    width: 10px;
    background-color: #f88d19;
    border-radius: 100%; /* 将circle绝对定位，当上下左右都设置为0， 同时margin设为auto时，元素就将垂直水平居中 */
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    animation: dada 2s linear infinite; /*动画名称，持续时间，线性播放，无限持续*/
}
.circle:nth-child(2) {
    animation-delay: 1s;
} /* 从0逐渐变为半径为100的圆，同时逐渐变得透明 */
@keyframes dada{
        0% {
         height: 0px;
         width: 0px;
         opacity: 1; /*透明度1,全部显示*/
        }
        100% {
        height: 100px;
        width: 100px;
        opacity: 0; /*透明度0,看不见了*/
    }
}
.loading-box {
    height: 100px;
    width: 100px;
/*    border: 1px solid red; */
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
.loading{
    position: fixed;
    background: #fff;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 666666666;
    display: none;
}

</style>

3.HTML结构

<div class="loading">
    <div class="loading-box">
        <div class="circle"></div>
        <div class="circle"></div>
    </div>
</div>