<!doctype html> <html> <head> <meta charset="utf-8"> <title>js模拟进度条练习</title> <script type='text/javascript' src="https://xiazai.jb51.net/201508/yuanma/jquery-1.8.0.min.js"></script> <script type='text/javascript' src='http://xiazai.jb51.net/201508/yuanma/jquery.artDialog.js?skin=default'></script> <style> body{ font-size:12px} .aui_nw, .aui_ne, .aui_sw, .aui_se { height: 1px; width: 1px; } .aui_outer, .aui_inner { border: 0; } .aui_state_lock .aui_border { box-shadow: 0 0 10px rgba(0, 0, 0, .8); } </style> </head> <body> <button>显示进度条</button> <div>https://www.jb51.net</div> </body> </html> <script> (function(w){ var _html='<div>正在为您载入数据，请稍后……</div><div><div></div></div>'; var __g; var _maxWidth=100; var _nowWidth=0; var _speed=30; var _step=2; var __time; progress={ render:function(fn){ fn&&fn(_html); _nowWidth=0; __g=document.getElementById('jsLoadInner'); this.fx(); }, complete:function(fn){ clearTimeout(__time); progress.completeFn=fn; this.setOver(); }, setOver:function(){ var _stepa=_step*1.5; if(_nowWidth<_maxWidth){ _nowWidth=_nowWidth-0+_stepa; parseInt(_nowWidth)>parseInt(_maxWidth)?_nowWidth=_maxWidth:''; __g.style.width=''+_nowWidth+'%'; _speed=(_maxWidth-_nowWidth)/1000; __time=setTimeout('progress.setOver()',_speed) ; }else{ clearTimeout(__time); progress.completeFn&&progress.completeFn(); }; }, fx:function(){ var _stepa=_step; if(_nowWidth<_maxWidth-5){ _stepa=_nowWidth>_maxWidth*0.6?(_stepa*0.02):_stepa; _nowWidth=_nowWidth-0+_stepa; parseInt(_nowWidth)>parseInt(_maxWidth)?_nowWidth=_maxWidth:''; __g.style.width=''+_nowWidth+'%'; __time=setTimeout('progress.fx()',_speed); }else{ clearTimeout(__time); }; } } w.progress=progress; })(window) // $(function(){ showLoading(); $('body') .on('click','#starLoading',function(){ showLoading(); }) }) function showLoading(){ //开始显示进度条 progress.render(function(html){ art.dialog({id:"jsLoadingDialog",title:"\u6b63\u5728\u52a0\u8f7d\u4e2d\u2026\u2026",cancel:!1,lock:!0,background:"#fff",fixed:!0,content:html}); }); //请求完成后完成进度条，，，模拟10秒后请求完成 setTimeout(function(){ progress.complete(function(html){ art.dialog.list['jsLoadingDialog']&&art.dialog.list['jsLoadingDialog'].close(); $('#msgHtml').html('进度条已走完'); }); },10000); }; </script>
运行效果如下图所示：
