Don't forget that you have had a dream

    

自用的一个web站点加载特效

一个加载特效

CSS代码

.spinner {
  width: 60px;
  height: 60px;
  background-color: #67CF22;
 
  margin: 100px auto;
  -webkit-animation: rotateplane 1.2s infinite ease-in-out;
  animation: rotateplane 1.2s infinite ease-in-out;
  
}
 
@-webkit-keyframes rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}
 
@keyframes rotateplane {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
  } 50% {
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
  } 100% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}

JavaScript代码

//获取浏览器页面可见高度和宽度  
var _PageHeight = document.documentElement.clientHeight,  
    _PageWidth = document.documentElement.clientWidth;  
//计算loading框距离顶部和左部的距离(loading框的宽度为215px,高度为61px)  
var _LoadingTop = _PageHeight > 90 ? (_PageHeight - 90) / 2 : 0,  
    _LoadingLeft = _PageWidth > 90 ? (_PageWidth - 90) / 2 : 0;  
//在页面未加载完毕之前显示的loading Html自定义内容  
var _LoadingHtml = '<div id="loadingDiv" style="position:absolute;left:0;width:100%;height:' + _PageHeight + 'px;top:0;background:#FFFFFF;opacity:1.0;filter:alpha(opacity=80);z-index:10000;"><div class="spinner" style="position: top: 60px; margin:' + _LoadingTop + 'px auto ;"></div></div>';  
//呈现loading效果  
document.write(_LoadingHtml);  

//监听加载状态改变  
document.onreadystatechange = completeLoading;  

//加载状态为complete时移除loading效果  
function completeLoading() {  
    if (document.readyState == "complete") {  
        $("#loadingDiv").fadeOut(1500);
    }  
}  

html使用方法

把上面的两段代码保存成 .css / .js 文件,在需要加载的页面引入文件即可

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>loading加载特效</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="./loading.css">
    </head>
    <body style="text-align:center;margin-top: 200px">
        <h2>这是一个加载特效,刷新页面可见,页面加载完成后隐藏</h2>
        <script src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js" ></script>
        <script src="./loading.js" ></script>
    </body>
</html>

使用效果

loading.gif

您可以自由的转载和修改,但请务必注明文章来源并且不可用于商业目的。
本站部分内容收集于互联网,如果有侵权内容、不妥之处,请联系我们删除。敬请谅解!
所有原创文章采用 知识共享署名-非商业性使用 4.0 国际许可协议 知识共享许可协议 进行许可。

评论已关闭

  更新日志

博客banner下方滚动文字替换为使用 一言API 随机获取 --- updated on 2019-05-22 09:04:31 星期三

  关于博主

三里林,一个致力于分享,分享心得,分享技术,分享知识点的个人博客

  近期评论

  分类目录


Warning: file_get_contents(https://v1.hitokoto.cn/?c=d&encode=text): failed to open stream: HTTP request failed! HTTP/1.1 403 Forbidden in /www/wwwroot/www.whongbin.com/usr/themes/Practice01/footer.php on line 43


Warning: file_get_contents(https://v1.hitokoto.cn/?c=f&encode=text): failed to open stream: HTTP request failed! HTTP/1.1 403 Forbidden in /www/wwwroot/www.whongbin.com/usr/themes/Practice01/footer.php on line 44


Warning: file_get_contents(https://v1.hitokoto.cn/?c=d&encode=text): failed to open stream: HTTP request failed! HTTP/1.1 403 Forbidden in /www/wwwroot/www.whongbin.com/usr/themes/Practice01/footer.php on line 43


Warning: file_get_contents(https://v1.hitokoto.cn/?c=f&encode=text): failed to open stream: HTTP request failed! HTTP/1.1 403 Forbidden in /www/wwwroot/www.whongbin.com/usr/themes/Practice01/footer.php on line 44


Warning: file_get_contents(https://v1.hitokoto.cn/?c=d&encode=text): failed to open stream: HTTP request failed! HTTP/1.1 403 Forbidden in /www/wwwroot/www.whongbin.com/usr/themes/Practice01/footer.php on line 43


Warning: file_get_contents(https://v1.hitokoto.cn/?c=f&encode=text): failed to open stream: HTTP request failed! HTTP/1.1 403 Forbidden in /www/wwwroot/www.whongbin.com/usr/themes/Practice01/footer.php on line 44


Warning: file_get_contents(https://v1.hitokoto.cn/?c=d&encode=text): failed to open stream: HTTP request failed! HTTP/1.1 403 Forbidden in /www/wwwroot/www.whongbin.com/usr/themes/Practice01/footer.php on line 43


Warning: file_get_contents(https://v1.hitokoto.cn/?c=f&encode=text): failed to open stream: HTTP request failed! HTTP/1.1 403 Forbidden in /www/wwwroot/www.whongbin.com/usr/themes/Practice01/footer.php on line 44