Home >Web Front-end >JS Tutorial >jquery simulation progress bar implementation method_jquery
The example in this article describes the implementation method of jquery simulation progress bar. Share it with everyone for your reference. The details are as follows:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>js模拟进度条练习</title> <script type='text/javascript' src="http://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 id="starLoading">显示进度条</button> <div id="msgHtml">http://www.jb51.net</div> </body> </html> <script> (function(w){ var _html='<div style="line-height: 30px;text-align: center;">正在为您载入数据,请稍后……</div><div id="jsLoadOuter" style="width:250px;height:8px;border:#6BAAC9 solid 1px; background:#C0EBFF; margin:0 auto;box-shadow: 0 0 3px #2E94BB;padding:1px"><div id="jsLoadInner" style="background:#54AEE0;height:100%;width:0"></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>
The operation effect is as shown below:
I hope this article will be helpful to everyone’s jquery programming design.