网页顶部加载进度条，跟随网页加载完自动消失

编辑：橙子来源：转载时间：2021-10-31 阅读：123 次

如图：

刷新本页面可查看顶部进度条效果
代码如下

css:

.pace {
    -webkit-pointer-events:none;
    pointer-events:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    user-select:none;
}
.pace-inactive {
    display:none;/*此段代码进度条跑完后隐藏*/
}
.pace .pace-progress {
    background:#ff0000;/*进度条颜色*/
    position:fixed;
    z-index:2000;
    top:0;
    left:0;/*进度条开始位置*/
    height:3px;/*进度条高度（宽度）*/
    -webkit-transition:width 0.1s;
    -moz-transition:width 0.1s;
    -o-transition:width 0.1s;
    transition:width 0.1s;
}

js：

(function(){var AjaxMonitor,Bar,DocumentMonitor,ElementMonitor,ElementTracker,EventLagMonitor,Evented,Events,NoTargetError,RequestIntercept,SOURCE_KEYS,Scaler,SocketRequestTracker,XHRRequestTracker,animation,avgAmplitude,bar,cancelAnimation,cancelAnimationFrame,defaultOptions,extend,extendNative,getFromDOM,getIntercept,handlePushState,ignoreStack,init,now,options,requestAnimationFrame,result,runAnimation,scalers,shouldIgnoreURL,shouldTrack,source,sources,uniScaler,_WebSocket,_XDomainRequest,_XMLHttpRequest,_i,_intercept,_len,_pushState,_ref,_ref1,_replaceState,__slice=[].slice,__hasProp={}.hasOwnProperty,__extends=function(child,parent){for(var key in parent){if(__hasProp.call(parent,key)){child[key]=parent[key]}}function ctor(){this.constructor=child}ctor.prototype=parent.prototype;child.prototype=new ctor();child.__super__=parent.prototype;return child},__indexOf=[].indexOf||function(item){for(var i=0,l=this.length;i<l;i++){if(i in this&&this[i]===item){return i}}return -1};defaultOptions={catchupTime:500,initialRate:0.03,minTime:500,ghostTime:500,maxProgressPerFrame:10,easeFactor:1.25,startOnPageLoad:true,restartOnPushState:true,restartOnRequestAfter:500,target:"body",elements:{checkInterval:100,selectors:["body"]},eventLag:{minSamples:10,sampleCount:3,lagThreshold:3},ajax:{trackMethods:["GET"],trackWebSockets:true,ignoreURLs:[]}};now=function(){var _ref;return(_ref=typeof performance!=="undefined"&&performance!==null?typeof performance.now==="function"?performance.now():void 0:void 0)!=null?_ref:+(new Date)};requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame;cancelAnimationFrame=window.cancelAnimationFrame||window.mozCancelAnimationFrame;if(requestAnimationFrame==null){requestAnimationFrame=function(fn){return setTimeout(fn,50)};cancelAnimationFrame=function(id){return clearTimeout(id)}}runAnimation=function(fn){var last,tick;last=now();tick=function(){var diff;diff=now()-last;if(diff>=33){last=now();return fn(diff,function(){return requestAnimationFrame(tick)})}else{return setTimeout(tick,33-diff)}};return tick()};result=function(){var args,key,obj;obj=arguments[0],key=arguments[1],args=3<=arguments.length?__slice.call(arguments,2):[];if(typeof obj[key]==="function"){return obj[key].apply(obj,args)}else{return obj[key]}};extend=function(){var key,out,source,sources,val,_i,_len;out=arguments[0],sources=2<=arguments.length?__slice.call(arguments,1):[];for(_i=0,_len=sources.length;_i<_len;_i++){source=sources[_i];if(source){for(key in source){if(!__hasProp.call(source,key)){continue}val=source[key];if((out[key]!=null)&&typeof out[key]==="object"&&(val!=null)&&typeof val==="object"){extend(out[key],val)}else{out[key]=val}}}}return out};avgAmplitude=function(arr){var count,sum,v,_i,_len;sum=count=0;for(_i=0,_len=arr.length;_i<_len;_i++){v=arr[_i];sum+=Math.abs(v);count++}return sum/count};getFromDOM=function(key,json){var data,e,el;if(key==null){key="options"}if(json==null){json=true}el=document.querySelector("[data-pace-"+key+"]");if(!el){return}data=el.getAttribute("data-pace-"+key);if(!json){return data}try{return JSON.parse(data)}catch(_error){e=_error;return typeof console!=="undefined"&&console!==null?console.error("Error parsing inline pace options",e):void 0}};Evented=(function(){function Evented(){}Evented.prototype.on=function(event,handler,ctx,once){var _base;if(once==null){once=false}if(this.bindings==null){this.bindings={}}if((_base=this.bindings)[event]==null){_base[event]=[]}return this.bindings[event].push({handler:handler,ctx:ctx,once:once})};Evented.prototype.once=function(event,handler,ctx){return this.on(event,handler,ctx,true)};Evented.prototype.off=function(event,handler){var i,_ref,_results;if(((_ref=this.bindings)!=null?_ref[event]:void 0)==null){return}if(handler==null){return delete this.bindings[event]}else{i=0;_results=[];while(i<this.bindings[event].length){if(this.bindings[event][i].handler===handler){_results.push(this.bindings[event].splice(i,1))}else{_results.push(i++)}}return _results}};Evented.prototype.trigger=function(){var args,ctx,event,handler,i,once,_ref,_ref1,_results;event=arguments[0],args=2<=arguments.length?__slice.call(arguments,1):[];if((_ref=this.bindings)!=null?_ref[event]:void 0){i=0;_results=[];while(i<this.bindings[event].length){_ref1=this.bindings[event][i],handler=_ref1.handler,ctx=_ref1.ctx,once=_ref1.once;handler.apply(ctx!=null?ctx:this,args);if(once){_results.push(this.bindings[event].splice(i,1))}else{_results.push(i++)}}return _results}};return Evented})();if(window.Pace==null){window.Pace={}}extend(Pace,Evented.prototype);options=Pace.options=extend({},defaultOptions,window.paceOptions,getFromDOM());_ref=["ajax","document","eventLag","elements"];for(_i=0,_len=_ref.length;_i<_len;_i++){source=_ref[_i];if(options[source]===true){options[source]=defaultOptions[source]}}NoTargetError=(function(_super){__extends(NoTargetError,_super);function NoTargetError(){_ref1=NoTargetError.__super__.constructor.apply(this,arguments);
return _ref1}return NoTargetError})(Error);Bar=(function(){function Bar(){this.progress=0}Bar.prototype.getElement=function(){var targetElement;if(this.el==null){targetElement=document.querySelector(options.target);if(!targetElement){throw new NoTargetError}this.el=document.createElement("div");this.el.className="pace pace-active";document.body.className=document.body.className.replace(/pace-done/g,"");document.body.className+=" pace-running";this.el.innerHTML='<div class="pace-progress">\n  <div class="pace-progress-inner"></div>\n</div>\n<div class="pace-activity"></div>';if(targetElement.firstChild!=null){targetElement.insertBefore(this.el,targetElement.firstChild)}else{targetElement.appendChild(this.el)}}return this.el};Bar.prototype.finish=function(){var el;el=this.getElement();el.className=el.className.replace("pace-active","");el.className+=" pace-inactive";document.body.className=document.body.className.replace("pace-running","");return document.body.className+=" pace-done"};Bar.prototype.update=function(prog){this.progress=prog;return this.render()};Bar.prototype.destroy=function(){try{this.getElement().parentNode.removeChild(this.getElement())}catch(_error){NoTargetError=_error}return this.el=void 0};Bar.prototype.render=function(){var el,progressStr;if(document.querySelector(options.target)==null){return false}el=this.getElement();el.children[0].style.width=""+this.progress+"%";if(!this.lastRenderedProgress||this.lastRenderedProgress|0!==this.progress|0){el.children[0].setAttribute("data-progress-text",""+(this.progress|0)+"%");if(this.progress>=100){progressStr="99"}else{progressStr=this.progress<10?"0":"";progressStr+=this.progress|0}el.children[0].setAttribute("data-progress",""+progressStr)}return this.lastRenderedProgress=this.progress};Bar.prototype.done=function(){return this.progress>=100};return Bar})();Events=(function(){function Events(){this.bindings={}}Events.prototype.trigger=function(name,val){var binding,_j,_len1,_ref2,_results;if(this.bindings[name]!=null){_ref2=this.bindings[name];_results=[];for(_j=0,_len1=_ref2.length;_j<_len1;_j++){binding=_ref2[_j];_results.push(binding.call(this,val))}return _results}};Events.prototype.on=function(name,fn){var _base;if((_base=this.bindings)[name]==null){_base[name]=[]}return this.bindings[name].push(fn)};return Events})();_XMLHttpRequest=window.XMLHttpRequest;_XDomainRequest=window.XDomainRequest;_WebSocket=window.WebSocket;extendNative=function(to,from){var e,key,val,_results;_results=[];for(key in from.prototype){try{val=from.prototype[key];if((to[key]==null)&&typeof val!=="function"){_results.push(to[key]=val)}else{_results.push(void 0)}}catch(_error){e=_error}}return _results};ignoreStack=[];Pace.ignore=function(){var args,fn,ret;fn=arguments[0],args=2<=arguments.length?__slice.call(arguments,1):[];ignoreStack.unshift("ignore");ret=fn.apply(null,args);ignoreStack.shift();return ret};Pace.track=function(){var args,fn,ret;fn=arguments[0],args=2<=arguments.length?__slice.call(arguments,1):[];ignoreStack.unshift("track");ret=fn.apply(null,args);ignoreStack.shift();return ret};shouldTrack=function(method){var _ref2;if(method==null){method="GET"}if(ignoreStack[0]==="track"){return"force"}if(!ignoreStack.length&&options.ajax){if(method==="socket"&&options.ajax.trackWebSockets){return true}else{if(_ref2=method.toUpperCase(),__indexOf.call(options.ajax.trackMethods,_ref2)>=0){return true}}}return false};RequestIntercept=(function(_super){__extends(RequestIntercept,_super);function RequestIntercept(){var monitorXHR,_this=this;RequestIntercept.__super__.constructor.apply(this,arguments);monitorXHR=function(req){var _open;_open=req.open;return req.open=function(type,url,async){if(shouldTrack(type)){_this.trigger("request",{type:type,url:url,request:req})}return _open.apply(req,arguments)}};window.XMLHttpRequest=function(flags){var req;req=new _XMLHttpRequest(flags);monitorXHR(req);return req};try{extendNative(window.XMLHttpRequest,_XMLHttpRequest)}catch(_error){}if(_XDomainRequest!=null){window.XDomainRequest=function(){var req;req=new _XDomainRequest;monitorXHR(req);return req};try{extendNative(window.XDomainRequest,_XDomainRequest)}catch(_error){}}if((_WebSocket!=null)&&options.ajax.trackWebSockets){window.WebSocket=function(url,protocols){var req;if(protocols!=null){req=new _WebSocket(url,protocols)}else{req=new _WebSocket(url)}if(shouldTrack("socket")){_this.trigger("request",{type:"socket",url:url,protocols:protocols,request:req})}return req};try{extendNative(window.WebSocket,_WebSocket)}catch(_error){}}}return RequestIntercept})(Events);_intercept=null;getIntercept=function(){if(_intercept==null){_intercept=new RequestIntercept}return _intercept};shouldIgnoreURL=function(url){var pattern,_j,_len1,_ref2;_ref2=options.ajax.ignoreURLs;for(_j=0,_len1=_ref2.length;_j<_len1;_j++){pattern=_ref2[_j];if(typeof pattern==="string"){if(url.indexOf(pattern)!==-1){return true}}else{if(pattern.test(url)){return true}}}return false};getIntercept().on("request",function(_arg){var after,args,request,type,url;
type=_arg.type,request=_arg.request,url=_arg.url;if(shouldIgnoreURL(url)){return}if(!Pace.running&&(options.restartOnRequestAfter!==false||shouldTrack(type)==="force")){args=arguments;after=options.restartOnRequestAfter||0;if(typeof after==="boolean"){after=0}return setTimeout(function(){var stillActive,_j,_len1,_ref2,_ref3,_results;if(type==="socket"){stillActive=request.readyState<2}else{stillActive=(0<(_ref2=request.readyState)&&_ref2<4)}if(stillActive){Pace.restart();_ref3=Pace.sources;_results=[];for(_j=0,_len1=_ref3.length;_j<_len1;_j++){source=_ref3[_j];if(source instanceof AjaxMonitor){source.watch.apply(source,args);break}else{_results.push(void 0)}}return _results}},after)}});AjaxMonitor=(function(){function AjaxMonitor(){var _this=this;this.elements=[];getIntercept().on("request",function(){return _this.watch.apply(_this,arguments)})}AjaxMonitor.prototype.watch=function(_arg){var request,tracker,type,url;type=_arg.type,request=_arg.request,url=_arg.url;if(shouldIgnoreURL(url)){return}if(type==="socket"){tracker=new SocketRequestTracker(request)}else{tracker=new XHRRequestTracker(request)}return this.elements.push(tracker)};return AjaxMonitor})();XHRRequestTracker=(function(){function XHRRequestTracker(request){var event,size,_j,_len1,_onreadystatechange,_ref2,_this=this;this.progress=0;if(window.ProgressEvent!=null){size=null;request.addEventListener("progress",function(evt){if(evt.lengthComputable){return _this.progress=100*evt.loaded/evt.total}else{return _this.progress=_this.progress+(100-_this.progress)/2}});_ref2=["load","abort","timeout","error"];for(_j=0,_len1=_ref2.length;_j<_len1;_j++){event=_ref2[_j];request.addEventListener(event,function(){return _this.progress=100})}}else{_onreadystatechange=request.onreadystatechange;request.onreadystatechange=function(){var _ref3;if((_ref3=request.readyState)===0||_ref3===4){_this.progress=100}else{if(request.readyState===3){_this.progress=50}}return typeof _onreadystatechange==="function"?_onreadystatechange.apply(null,arguments):void 0}}}return XHRRequestTracker})();SocketRequestTracker=(function(){function SocketRequestTracker(request){var event,_j,_len1,_ref2,_this=this;this.progress=0;_ref2=["error","open"];for(_j=0,_len1=_ref2.length;_j<_len1;_j++){event=_ref2[_j];request.addEventListener(event,function(){return _this.progress=100})}}return SocketRequestTracker})();ElementMonitor=(function(){function ElementMonitor(options){var selector,_j,_len1,_ref2;if(options==null){options={}}this.elements=[];if(options.selectors==null){options.selectors=[]}_ref2=options.selectors;for(_j=0,_len1=_ref2.length;_j<_len1;_j++){selector=_ref2[_j];this.elements.push(new ElementTracker(selector))}}return ElementMonitor})();ElementTracker=(function(){function ElementTracker(selector){this.selector=selector;this.progress=0;this.check()}ElementTracker.prototype.check=function(){var _this=this;if(document.querySelector(this.selector)){return this.done()}else{return setTimeout((function(){return _this.check()}),options.elements.checkInterval)}};ElementTracker.prototype.done=function(){return this.progress=100};return ElementTracker})();DocumentMonitor=(function(){DocumentMonitor.prototype.states={loading:0,interactive:50,complete:100};function DocumentMonitor(){var _onreadystatechange,_ref2,_this=this;this.progress=(_ref2=this.states[document.readyState])!=null?_ref2:100;_onreadystatechange=document.onreadystatechange;document.onreadystatechange=function(){if(_this.states[document.readyState]!=null){_this.progress=_this.states[document.readyState]}return typeof _onreadystatechange==="function"?_onreadystatechange.apply(null,arguments):void 0}}return DocumentMonitor})();EventLagMonitor=(function(){function EventLagMonitor(){var avg,interval,last,points,samples,_this=this;this.progress=0;avg=0;samples=[];points=0;last=now();interval=setInterval(function(){var diff;diff=now()-last-50;last=now();samples.push(diff);if(samples.length>options.eventLag.sampleCount){samples.shift()}avg=avgAmplitude(samples);if(++points>=options.eventLag.minSamples&&avg<options.eventLag.lagThreshold){_this.progress=100;return clearInterval(interval)}else{return _this.progress=100*(3/(avg+3))}},50)}return EventLagMonitor})();Scaler=(function(){function Scaler(source){this.source=source;this.last=this.sinceLastUpdate=0;this.rate=options.initialRate;this.catchup=0;this.progress=this.lastProgress=0;if(this.source!=null){this.progress=result(this.source,"progress")}}Scaler.prototype.tick=function(frameTime,val){var scaling;if(val==null){val=result(this.source,"progress")}if(val>=100){this.done=true}if(val===this.last){this.sinceLastUpdate+=frameTime}else{if(this.sinceLastUpdate){this.rate=(val-this.last)/this.sinceLastUpdate}this.catchup=(val-this.progress)/options.catchupTime;this.sinceLastUpdate=0;this.last=val}if(val>this.progress){this.progress+=this.catchup*frameTime}scaling=1-Math.pow(this.progress/100,options.easeFactor);this.progress+=scaling*this.rate*frameTime;this.progress=Math.min(this.lastProgress+options.maxProgressPerFrame,this.progress);
this.progress=Math.max(0,this.progress);this.progress=Math.min(100,this.progress);this.lastProgress=this.progress;return this.progress};return Scaler})();sources=null;scalers=null;bar=null;uniScaler=null;animation=null;cancelAnimation=null;Pace.running=false;handlePushState=function(){if(options.restartOnPushState){return Pace.restart()}};if(window.history.pushState!=null){_pushState=window.history.pushState;window.history.pushState=function(){handlePushState();return _pushState.apply(window.history,arguments)}}if(window.history.replaceState!=null){_replaceState=window.history.replaceState;window.history.replaceState=function(){handlePushState();return _replaceState.apply(window.history,arguments)}}SOURCE_KEYS={ajax:AjaxMonitor,elements:ElementMonitor,document:DocumentMonitor,eventLag:EventLagMonitor};(init=function(){var type,_j,_k,_len1,_len2,_ref2,_ref3,_ref4;Pace.sources=sources=[];_ref2=["ajax","elements","document","eventLag"];for(_j=0,_len1=_ref2.length;_j<_len1;_j++){type=_ref2[_j];if(options[type]!==false){sources.push(new SOURCE_KEYS[type](options[type]))}}_ref4=(_ref3=options.extraSources)!=null?_ref3:[];for(_k=0,_len2=_ref4.length;_k<_len2;_k++){source=_ref4[_k];sources.push(new source(options))}Pace.bar=bar=new Bar;scalers=[];return uniScaler=new Scaler})();Pace.stop=function(){Pace.trigger("stop");Pace.running=false;bar.destroy();cancelAnimation=true;if(animation!=null){if(typeof cancelAnimationFrame==="function"){cancelAnimationFrame(animation)}animation=null}return init()};Pace.restart=function(){Pace.trigger("restart");Pace.stop();return Pace.start()};Pace.go=function(){var start;Pace.running=true;bar.render();start=now();cancelAnimation=false;return animation=runAnimation(function(frameTime,enqueueNextFrame){var avg,count,done,element,elements,i,j,remaining,scaler,scalerList,sum,_j,_k,_len1,_len2,_ref2;remaining=100-bar.progress;count=sum=0;done=true;for(i=_j=0,_len1=sources.length;_j<_len1;i=++_j){source=sources[i];scalerList=scalers[i]!=null?scalers[i]:scalers[i]=[];elements=(_ref2=source.elements)!=null?_ref2:[source];for(j=_k=0,_len2=elements.length;_k<_len2;j=++_k){element=elements[j];scaler=scalerList[j]!=null?scalerList[j]:scalerList[j]=new Scaler(element);done&=scaler.done;if(scaler.done){continue}count++;sum+=scaler.tick(frameTime)}}avg=sum/count;bar.update(uniScaler.tick(frameTime,avg));if(bar.done()||done||cancelAnimation){bar.update(100);Pace.trigger("done");return setTimeout(function(){bar.finish();Pace.running=false;return Pace.trigger("hide")},Math.max(options.ghostTime,Math.max(options.minTime-(now()-start),0)))}else{return enqueueNextFrame()}})};Pace.start=function(_options){extend(options,_options);Pace.running=true;try{bar.render()}catch(_error){NoTargetError=_error}if(!document.querySelector(".pace")){return setTimeout(Pace.start,50)}else{Pace.trigger("start");return Pace.go()}};if(typeof define==="function"&&define.amd){define(function(){return Pace})}else{if(typeof exports==="object"){module.exports=Pace}else{if(options.startOnPageLoad){Pace.start()}}}}).call(this);

使用方法:
1.将以上源码放到你网站对应的css和js文件里
2.刷新网页即可看到效果！

网页顶部加载进度条，跟随网页加载完自动消失

让网页“浪“起来，网页底部好看的波浪代码

使用JavaScript实现网页的白天黑夜模式

JS根据不通的域名显示不同的备案号和内容

网站美化 – 复制提醒和禁用F12以及右键菜单提醒代码美化版

给网站外链添加GO跳转提示代码

为你的网站部署jQuery.lazyload插件实现图片延迟加载