没有真实数据模拟,也没用过,只是对其原理感兴趣,自己也做了一个。
1.纯css实现
<style> #loading{ height: 4px; position: fixed; top: 0; z-index: 9999; background:#6bc30d; box-shadow:#6bc30d 1px 0 6px 1px; animation:pulse 1s ease-out; } @-webkit-keyframes pulse { 30% { width: 10%; /* 盒子宽度为10% */ opacity:.6 } 60% { width: 40%; /* 盒子宽度为40% */ opacity:0.6; } 100% { width: 100%; /* 盒子宽度为100% */ opacity:0.6 } } </style> </head> <body > <div id="loading"> </div>
注:这种实现方式有问题,第一:模拟的页面加载只是做了一个动画,盒子宽度的加载,依赖于动画执行的时间(逻辑错误,应该是页面加载到一定位置,执行动画),当设置
animation 时间为0 ,看不到任何效果;第二:页面的左上角会残留阴影。测试(chrome)
2.jQuery 实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery.min.js"></script> <style> #loading{ height: 4px; position: fixed; top: 0; z-index: 9999; background:#6bc30d; box-shadow:#6bc30d 1px 0 6px 1px; } </style> </head> <body > <div id="loading"> </div> </body> <script> $("#loading").animate({'width':'20%'},20) //链式执行动画队列 .animate({'width':'40%'},20) .animate({'width':'60%'},20) .animate({'width':'80%'},20) .animate({'width':'100%'},20); $(function(){ //页面完以后,隐藏进度条 $("#loading").fadeOut(); }) </script> </html>