loading.js

左手的ㄟ右手 2023-07-11 05:51 5阅读 0赞

/**
    * 将此js文件放在所以页面引入的其他js文件上方
    */
    
    
    // 加载HTML图
    var _LoadingHtml = '<div id="loadingDiv" style="position:fixed;left: 0;top: 0;right: 0;bottom: 0;z-index: 99999;"><div style="position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);"><div class="loadEffect"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div></div></div><style type="text/css">.loadEffect{width:100px;height:100px;position:relative;margin:0 auto;margin-top:100px;}.loadEffect span{display:inline-block;width:16px;height:16px;border-radius:50%;background:lightgreen;position:absolute;-webkit-animation:load 1.04s ease infinite;}@-webkit-keyframes load{0%{opacity:1;}100%{opacity:0.2;}}.loadEffect span:nth-child(1){left:0;top:50%;margin-top:-8px;-webkit-animation-delay:0.13s;}.loadEffect span:nth-child(2){left:14px;top:14px;-webkit-animation-delay:0.26s;}.loadEffect span:nth-child(3){left:50%;top:0;margin-left:-8px;-webkit-animation-delay:0.39s;}.loadEffect span:nth-child(4){top:14px;right:14px;-webkit-animation-delay:0.52s;}.loadEffect span:nth-child(5){right:0;top:50%;margin-top:-8px;-webkit-animation-delay:0.65s;}.loadEffect span:nth-child(6){right:14px;bottom:14px;-webkit-animation-delay:0.78s;}.loadEffect span:nth-child(7){bottom:0;left:50%;margin-left:-8px;-webkit-animation-delay:0.91s;}.loadEffect span:nth-child(8){bottom:14px;left:14px;-webkit-animation-delay:1.04s;}</style>'
    // 呈现loading效果
    document.write(_LoadingHtml);
    // 监听加载状态改变
    document.onreadystatechange = completeLoading;
    // 加载状态为complete时移除loading效果
    function completeLoading() {
    　　if (document.readyState == "complete") {
    　　　　var loadingMask = document.getElementById('loadingDiv');
    　　　　loadingMask.parentNode.removeChild(loadingMask);
    　　}
    }

loading.js

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 css3 animation爱心加载loadingjs特效