【css系列】创建网页加载进度条
一、最简单或者明显的方式是使用定时器
1、在网页中加入布局覆盖真实网页内容
2、使用定时器确定加载所用时间的长短,其实并不是真正的加载进度实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定时器的进度条</title> <script src="../js/jquery-3.2.1.js"></script> <script type="text/javascript"> $(function () { setInterval(function () { $(".loading").fadeOut(); },3000) }) </script> <style type="text/css"> .loading{ width: 100%; height: 100%; position: fixed; top:0; left:0; z-index: 100; background-color: white; } .loading .pic{ width: 64px; height: 64px; border: 1px solid red; background: url("./image/35.gif"); position: absolute; top:0; bottom: 0; left: 0; right:0; margin: auto; } </style> </head> <body> <div class="loading"> <div class="pic"></div> </div> <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2374531200,2817019640&fm=11&gp=0.jpg" alt=""/> <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1019761374,1197310851&fm=26&gp=0.jpg"/> <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1091681404,1813447708&fm=26&gp=0.jpg"> <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4039520080,1420114353&fm=26&gp=0.jpg"/> </body> </html>
二、在第一版中做改良
1、理论上还是使用定时器
2、覆盖的内容不在布局中定义而是动态加载
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定时器的进度条</title> <script src="../js/jquery-3.2.1.js"></script> <script type="text/javascript"> $(function () { var loading = '<div class="loading"><div class="pic"></div></div>'; $("body").append(loading); setInterval(function () { $(".loading").fadeOut(); },3000) }) </script> <style type="text/css"> .loading{ width: 100%; height: 100%; position: fixed; top:0; left:0; z-index: 100; background-color: white; } .loading .pic{ width: 64px; height: 64px; border: 1px solid red; background: url("./image/35.gif"); position: absolute; top:0; bottom: 0; left: 0; right:0; margin: auto; } </style> </head> <body> <div class="loading"> <div class="pic"></div> </div> <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2374531200,2817019640&fm=11&gp=0.jpg" alt=""/> <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1019761374,1197310851&fm=26&gp=0.jpg"/> <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1091681404,1813447708&fm=26&gp=0.jpg"> <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4039520080,1420114353&fm=26&gp=0.jpg"/> </body> </html>
三、通过加载状态实现进度条
document.onreadystatechange 页面加载状态改变时的事件
document.readyState 返回当前文档的状态
uninitialized:还未开始载入
loading:载入中
interactive已加载。文档与用户可以开始交互
complete:载入完成
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>进度条</title> <style type="text/css"> .loading{ width: 100%; height: 100%; position: fixed; top:0; left:0; z-index: 100; background-color: white; } .loading .pic{ width: 64px; height: 64px; border: 1px solid red; background: url("./image/35.gif"); position: absolute; top:0; bottom: 0; left: 0; right:0; margin: auto; } </style> <script src="../js/jquery-3.2.1.js"></script> <script type="text/javascript"> document.onreadystatechange = function () { console.log(document.readyState); if(document.readyState=='complete'){ $(".loading").fadeOut(); } } </script> </head> <body> <div class="loading"> <div class="pic"></div> </div> <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2374531200,2817019640&fm=11&gp=0.jpg" alt=""/> <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1019761374,1197310851&fm=26&gp=0.jpg"/> <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1091681404,1813447708&fm=26&gp=0.jpg"> <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4039520080,1420114353&fm=26&gp=0.jpg"/> </body> </html>
四、使用css创建进度条动画
1、我们可以在https://loading.io/网站上生成css动画图或者获得动画的css样式自己使用
2、我们可以在https://autoprefixer.github.io/?中自动做css的兼容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css3创建动画</title> <style type="text/css"> .loading{ width: 100%; height: 100%; position: fixed; top:0; left:0; z-index: 100; background-color: white; } .loading .pic{ width: 50px; height: 50px; position: absolute; top:0; bottom: 0; left: 0; right:0; margin: auto; } .loading .pic i{ display: block; float: left; width: 6px; height: 50px; background: #399; margin: 0 2px; -webkit-transform: scaleY(0.4); -ms-transform: scaleY(0.4); transform: scaleY(0.4); -webkit-animation: load 1.2s infinite; animation: load 1.2s infinite; } .loading .pic i:nth-child(1){ } .loading .pic i:nth-child(2){ -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } .loading .pic i:nth-child(3){ -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .loading .pic i:nth-child(4){ -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .loading .pic i:nth-child(5){ -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } @-webkit-keyframes load { 0%,40%,100%{-webkit-transform: scaleY(0.4);transform: scaleY(0.4)} 20%{-webkit-transform: scaleY(1);transform: scaleY(1)} } @keyframes load { 0%,40%,100%{-webkit-transform: scaleY(0.4);transform: scaleY(0.4)} 20%{-webkit-transform: scaleY(1);transform: scaleY(1)} } </style> <script src="../js/jquery-3.2.1.js"></script> <script type="text/javascript"> document.onreadystatechange = function () { if(document.readyState == "complete"){ $(".loading").fadeOut(); } } </script> </head> <body> <div class="loading"> <div class="pic"> <i></i> <i></i> <i></i> <i></i> <i></i> </div> </div> <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2374531200,2817019640&fm=11&gp=0.jpg" alt=""/> <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1019761374,1197310851&fm=26&gp=0.jpg"/> <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1091681404,1813447708&fm=26&gp=0.jpg"> <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4039520080,1420114353&fm=26&gp=0.jpg"/> </body> </html>