Pace
How do I make an pace?
Some work with pace, automatic page load progress bar. What is a pace? How do you make a pace? This script and codes were developed by Nikita Zubarets on 11 September 2022, Sunday.
Pace Previews
Pace - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pace</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html class="wf-proximanova-n1-active wf-proximanova-n3-active wf-proximanova-n4-active wf-proximanova-n6-active wf-proximanova-n7-active wf-active"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"><title>PACE</title><script async="" src="//www.google-analytics.com/analytics.js"></script><script id="hs-analytics" src="//js.hubspot.com/analytics/1409579700000/51294.js"></script><script src="/pace/pace.js"></script>
<link rel="stylesheet" href="/pace/docs/resources/barber-pole-orange.css"><link rel="icon" href="https://static.hubspot.com/favicon.ico"><link rel="stylesheet" href="https://static2cdn.hubspot.com/hubspot_public_assets/static-1.112/shared/sass/hubspot_public_assets.css"><link rel="stylesheet" href="https://static.hubspot.com/bundles/navigation.css"><link rel="stylesheet" href="https://github.hubspot.com/static-resources/css/print.css"><link rel="stylesheet" href="https://github.hubspot.com/static-resources/css/highlight-theme-github.css"><link rel="stylesheet" href="https://github.hubspot.com/static-resources/css/navigation-tweaks.css"><link rel="stylesheet" href="https://github.hubspot.com/static-resources/css/documentation.css"><script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><link rel="stylesheet" href="//github.hubspot.com/PACE//resources/executr/lib/CodeMirror/codemirror.css"><link rel="stylesheet" href="//github.hubspot.com/PACE//resources/executr/build/css/executr.css"><script src="//github.hubspot.com/PACE//resources/executr/lib/CodeMirror/codemirror.js"></script><script src="//github.hubspot.com/PACE//resources/executr/lib/CodeMirror/mode/coffeescript/coffeescript.js"></script><script src="//github.hubspot.com/PACE//resources/executr/lib/CodeMirror/mode/javascript/javascript.js"></script><script src="//github.hubspot.com/PACE//resources/executr/lib/coffee-script.js"></script><script src="//github.hubspot.com/PACE//resources/executr/lib/underscore.min.js"></script><script src="//github.hubspot.com/PACE//resources/executr/lib/js2coffee.min.js"></script><script src="//github.hubspot.com/PACE//resources/executr/build/js/executr.js"></script><script src="//github.hubspot.com/PACE//resources/executr/build/js/executr-run.js"></script><script src="//use.typekit.net/ghy0wve.js"></script><style type="text/css">.tk-proxima-nova{font-family:"proxima-nova",sans-serif;}</style><link rel="stylesheet" href="https://use.typekit.net/c/347a5e/proxima-nova:n1:n3:n4:n6:n7.b5r:N:2,b5t:N:2,b5w:N:2,b5y:N:2,bBh:N:2/d?3bb2a6e53c9684ffdc9a99f7135b2a629a9b1e388b7bc6a88da86dd810db6bf5de1a4dc89172202ee2b5087339715841e9919327cc418e0a078417b33b3ad0366aee346812e73ffc4e195305e3982110f54291e57cdceeb29443991079db0db8a09e5253ccff1168e48059ae00d3b7f11309d22c9d147c7d63174bdc2927d550be4a961392416840bad6a64aa7f8f4c34fc6ead6fadff5a28bbfe21e26a14f113e256ac8fb6849f0df2aac0a73d324d77f137582eedf7e00dcfdfb67ffeb86dd3fb1b1df9f57fd5bb4e914b55cde92ff9244e884e66070ed946b00aca340591aec7e8ea272aa47dda3d94ca96e9e68a3cc4ed868141a17fbc2229a79cd1c23f3081b1167a4c38bec6f46716cc4943d195a5704d04c6514df17d6b3ee9873a4a592d11ef4410ef0b2914c66c12e4b010167909588599d7d1940abd18855cd25"><script>try{Typekit.load();}catch(e){}
</script></head><body class=" pace-done"><div class="pace pace-inactive"><div class="pace-progress" data-progress-text="100%" data-progress="99" style="width: 100%;"> <div class="pace-progress-inner"></div>
</div>
<div class="pace-activity"></div></div><div id="hs-nav-v3" class="nav-width-flex signed-out-nav"> <div class="hs-nav-section main-nav"> <div class="nav-section-inner"> <ul class="nav-links-left"> <li class="first"><a class="nav-logo" href="https://www.hubspot.com/"><img height="34" src="https://static.hubspot.com/style-guide/img/nav-sprocket.png" width="29"></a></li> <li> <a href="https://dev.hubspot.com/?__hstc=114332689.aca2effae73416fc64c233860941600a.1409566431468.1409573433652.1409579429350.3&__hssc=114332689.1.1409579429350&__hsfp=140821128"> HubSpot Dev & Design </a> </li> <li> <a class="current-nav-item" href="https://hubspot.github.com"> Open Source </a> </li> <li> <a href="https://dev.hubspot.com/blog?__hstc=114332689.aca2effae73416fc64c233860941600a.1409566431468.1409573433652.1409579429350.3&__hssc=114332689.1.1409579429350&__hsfp=140821128"> Blog </a> </li> </ul> <ul class="nav-links-right"> <li class="first"> <a href="https://dev.hubspot.com/jobs/?__hstc=114332689.aca2effae73416fc64c233860941600a.1409566431468.1409573433652.1409579429350.3&__hssc=114332689.1.1409579429350&__hsfp=140821128" class="sign-in">We're Hiring Engineers</a> </li> </ul> </div> </div>
</div>
<div class="hs-doc-marquee"><div class="hs-page-width-normal"><div class="row-fluid"><div class="span6"><h1>PACE</h1><h3 class="hs-doc-marquee-description">Automatic page load progress bar</h3><p class="hs-doc-marquee-release">0.5.6</p><p class="hs-doc-marquee-stars"><iframe src="http://ghbtns.com/github-btn.html?user=HubSpot&repo=PACE&type=watch&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="240" height="30"></iframe></p></div><div class="span6"><div class="hs-doc-marquee-buttons"><a class="hs-doc-marquee-button" href="https://github.com/HubSpot/PACE">Star on GitHub</a><a class="hs-doc-marquee-button" href="https://github.com/HubSpot/PACE/archive/v0.5.6.zip">Download ZIP (v0.5.6)</a></div></div></div></div></div><div class="hs-page-width-normal"><div class="row-fluid"><div class="span3"><div class="hs-doc-sidenav"><nav><ul class="hs-public-sidenav"><li class="current-nav-item"><a href="">Home</a></li></ul></nav></div></div><div class="span9"><div class="hs-doc-content"><h1 id="pace">pace</h1>
<p>Include <a href="https://raw.github.com/HubSpot/pace/v0.5.3/pace.min.js">pace.js</a> and the
<a href="https://github.hubspot.com/pace/docs/welcome/">theme</a> css of your choice on your page
(as early as is possible), and you're done!</p>
<p>Pace will automatically monitor your ajax requests, event loop lag, document
ready state, and elements on your page to decide the progress. On ajax navigation
it will begin again!</p>
<p>If you use AMD or Browserify, require in pace.js and call <code>pace.start()</code> as early in
the loading process as is possible.</p>
<h2 id="install-with-eager">Install with Eager</h2>
<p>The easiest way to add Pace to your site is with <a href="https://eager.io">Eager</a>.
Click Install to see a live preview of Pace on your website.</p>
<iframe style="height: 48px; width: 180px" src="//install.eager.io?appId=kYKTiQjoVjQk" allowtransparency="true" scroll="no" frameborder="0"></iframe>
<h2 id="example">Example</h2>
<pre><code class="lang-html"><span class="tag"><<span class="title">head</span>></span> <span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"/pace/pace.js"</span>></span><span class="javascript"></span><span class="tag"></<span class="title">script</span>></span> <span class="tag"><<span class="title">link</span> <span class="attribute">href</span>=<span class="value">"/pace/themes/pace-theme-barber-shop.css"</span> <span class="attribute">rel</span>=<span class="value">"stylesheet"</span> /></span>
<span class="tag"></<span class="title">head</span>></span></code></pre>
<h2 id="configuration">Configuration</h2>
<p>Pace is fully automatic, no configuration is necessary to get started.</p>
<p>If you would like to make some tweaks, here's how:</p>
<p>You can set <code>window.paceOptions</code> before bringing in the file:</p>
<pre><code class="lang-javascript">paceOptions = { <span class="comment">// Disable the 'elements' source</span> elements: <span class="literal">false</span>, <span class="comment">// Only show the progress on regular and ajax-y page navigation,</span> <span class="comment">// not every request</span> restartOnRequestAfter: <span class="literal">false</span>
}</code></pre>
<p>You can also put options on the script tag:</p>
<pre><code class="lang-html"><span class="tag"><<span class="title">script</span> <span class="attribute">data-pace-options</span>=<span class="value">'{ "ajax": false }'</span> <span class="attribute">src</span>=<span class="value">'pace.js'</span>></span><span class="javascript"></span><span class="tag"></<span class="title">script</span>></span></code></pre>
<p>If you're using AMD or Browserify, you can pass your options to <code>start</code>:</p>
<pre><code class="lang-javascript">define([<span class="string">'pace'</span>], <span class="keyword">function</span>(pace){ pace.start({ document: <span class="literal">false</span> });
});</code></pre>
<h2 id="themes">Themes</h2>
<p>Pace includes a bunch of <a href="https://github.hubspot.com/pace/docs/welcome/">themes</a>
to get you started. Just include the appropriate css file. Send us a PR with
any interesting themes you create.</p>
<h2 id="collectors">Collectors</h2>
<p>Collectors are the bits of code which gather progress information. Pace includes four default collectors:</p>
<ul>
<li><p>Ajax</p>
<p>Monitors all ajax requests on the page</p>
</li>
<li><p>Elements</p>
<p>Checks for the existance of specific elements on the page</p>
</li>
<li><p>Document</p>
<p>Checks the document readyState</p>
</li>
<li><p>Event Lag</p>
<p>Checks for event loop lag signaling that javascript is being executed</p>
</li>
</ul>
<p>They can each be configured or disabled through configuration options of the same name.</p>
<pre><code class="lang-javascript">paceOptions = { ajax: <span class="literal">false</span>, <span class="comment">// disabled</span> document: <span class="literal">false</span>, <span class="comment">// disabled</span> eventLag: <span class="literal">false</span>, <span class="comment">// disabled</span> elements: { selectors: [<span class="string">'.my-page'</span>] }
};</code></pre>
<p>Add your own classes to <code>paceOptions.extraSources</code> to add more sources. Each source should either
have a <code>.progress</code> property, or a <code>.elements</code> property which is a list of objects with
<code>.progress</code> properties. Pace will automatically handle all scaling to make the progress
changes look smooth to the user.</p>
<h2 id="elements">Elements</h2>
<p>Elements being rendered to the screen is one way for us to decide that the page has been
rendered. If you would like to use that source of information (not required at all),
specify one or more selectors. You can comma seperate the selectors to propertly handle
error states, where the progress bar should disappear, but the element we are looking for
may never appear:</p>
<pre><code class="lang-javascript">paceOptions = { elements: { selectors: [<span class="string">'.timeline,.timeline-error'</span>, <span class="string">'.user-profile,.profile-error'</span>] }
}</code></pre>
<p>Pace will consider the elements test successful when each selector matches something. For
this example, when either <code>.timeline</code> or <code>.timeline-error</code> exist, and either <code>.user-profile</code>
or <code>.profile-error</code> exist.</p>
<h2 id="restart-rules">Restart Rules</h2>
<p>Most users want the progress bar to automatically restart when a pushState event occurs
(generally means ajax navigation is occuring). You can disable this:</p>
<pre><code class="lang-javascript">paceOptions = { restartOnPushState: <span class="literal">false</span>
}</code></pre>
<p>You can also have pace restart on every ajax request which lasts longer than x ms. You'll want to
disable this if you make ajax requests the user doesn't need to know about, like precaching:</p>
<pre><code class="lang-javascript">paceOptions = { restartOnRequestAfter: <span class="literal">false</span>
}</code></pre>
<p>You can always trigger a restart manually by calling <code>Pace.restart()</code></p>
<p>See <a href="https://github.com/HubSpot/pace/blob/master/pace.coffee">the source</a> for a full list of all options.</p>
<h2 id="api">API</h2>
<p>Pace exposes the following methods:</p>
<ul>
<li><p><code>Pace.start</code>: Show the progress bar and start updating. Called automatically if you don't use AMD or CommonJS.</p>
</li>
<li><p><code>Pace.restart</code>: Show the progress bar if it's hidden and start reporting the progress from scratch. Called automatically
whenever <code>pushState</code> or <code>replaceState</code> is called by default.</p>
</li>
<li><p><code>Pace.stop</code>: Hide the progress bar and stop updating it.</p>
</li>
<li><p><code>Pace.track</code>: Explicitly track one or more requests, see Tracking below</p>
</li>
<li><p><code>Pace.ignore</code>: Expliticly ignore one or more requests, see Tracking below</p>
</li>
</ul>
<h2 id="events">Events</h2>
<p>Pace fires the following events:</p>
<ul>
<li><code>start</code>: When pace is initially started, or as a part of a restart</li>
<li><code>stop</code>: When pace is manually stopped, or as a part of a restart</li>
<li><code>restart</code>: When pace is restarted (manually, or by a new AJAX request)</li>
<li><code>done</code>: When pace is finished</li>
<li><code>hide</code>: When the pace is hidden (can be later than <code>done</code>, based on <code>ghostTime</code> and <code>minTime</code>)</li>
</ul>
<p>You can bind onto events using the <code>on</code>, <code>off</code> and <code>once</code> methods:</p>
<ul>
<li><code>Pace.on(event, handler, [context])</code>: Call <code>handler</code> (optionally with context) when <code>event</code> is triggered</li>
<li><code>Pace.off(event, [handler])</code>: Unbind the provided <code>event</code> and <code>handler</code> combination.</li>
<li><code>Pace.once(event, handler, [context])</code>: Bind <code>handler</code> to the next (and only the next) incidence of <code>event</code></li>
</ul>
<h2 id="tracking">Tracking</h2>
<p>By default, Pace will show any ajax requests which begin as a part of a normal or ajax-y page load, or which last longer than
500ms.</p>
<p>You can disable all ajax tracking by setting <code>ajax</code> to false:</p>
<pre><code class="lang-javascript">Pace.options = { ajax: <span class="literal">false</span>
}</code></pre>
<p>You can disable ajax tracking except on page navigation by setting <code>restartOnRequestAfter</code> to false:</p>
<pre><code class="lang-javascript">Pace.options = { restartOnRequestAfter: <span class="literal">false</span>
}</code></pre>
<p>You can manually disable tracking for a specific request or requests by triggering them within a <code>Pace.ignore</code> callback:</p>
<pre><code class="lang-javascript">Pace.ignore(<span class="keyword">function</span>(){ $.ajax(...)
});</code></pre>
<p>You can force the progress bar to be shown for a specific request by triggering them within a <code>Pace.track</code> callback:</p>
<pre><code class="lang-javascript">Pace.track(<span class="keyword">function</span>(){ $.ajax(...)
});</code></pre>
<p>You can also ignore URLs based on a pattern:</p>
<pre><code class="lang-javascript">Pace.options = { ajax: { ignoreURLs: [<span class="string">'some-substring'</span>, <span class="regexp">/some-regexp/</span>] }
}</code></pre>
<h2 id="dependencies">Dependencies</h2>
<p>None!</p>
<h2 id="support">Support</h2>
<p>Pace is designed to support IE8+ (standards mode), FF 3.5+, Chrome, Safari 4+, Opera 10.5+, and all modern
mobile browsers. If you run into a compatibility issue, or can make a case for supporting something else,
please create an issue.</p>
<h2 id="size">Size</h2>
<p>pace.js is 4kb minified and gzipped. The themes vary between 0.5 and 4kb.</p>
<h2 id="issues">Issues</h2>
<p>We have obviously not tested this on every website. If you run into an issue, or find a way the automatic
detection could be better, please <a href="https://github.com/HubSpot/pace/issues/new">create an Issue</a>. If you can include a test case, that's even better.</p>
<h2 id="contributing">Contributing</h2>
<p>PRs Welcome!</p>
<p>Building requires node.js.</p>
<pre><code class="lang-bash">npm install
grunt</code></pre>
<p>You can also run <code>grunt watch</code> to have it automatically build as you make changes.</p>
<p>There is no need to include compiled files in PRs.</p>
<h2 id="credits">Credits</h2>
<p><a href="https://dev.hubspot.com/?__hstc=114332689.aca2effae73416fc64c233860941600a.1409566431468.1409573433652.1409579429350.3&__hssc=114332689.1.1409579429350&__hsfp=140821128">HubSpot</a></p>
<p>Javascript by <a href="https://twitter.com/zackbloom">Zack Bloom</a>
CSS by <a href="https://twitter.com/adamfschwartz">Adam Schwartz</a></p>
<p>Themes inspired by <a href="https://tympanus.net/codrops/2013/09/18/creative-loading-effects/">Mary Lou</a></p>
<p>Project inspired by <a href="https://ricostacruz.com/nprogress/">nprogress</a></p>
</div></div></div></div><div class="hs3-public-footer"><div class="row-fluid hs-page-width-normal"><div class="span3 hidden-phone"><h3>HubSpot</h3><ul><li><a href="https://www.hubspot.com">Home</a></li><li><a href="https://www.hubspot.com/software">Products</a></li><li><a href="https://www.hubspot.com/internet-marketing-company/">About</a></li></ul></div><div class="span3"><h3>Projects</h3><ul><li><a href="https://github.hubspot.com/messenger">Messenger</a></li><li><a href="https://github.hubspot.com/facewall">Facewall</a></li><li><a href="https://github.hubspot.com/jquery-zoomer">jQuery Zoomer</a></li><li><a href="https://github.hubspot.com/humanize">Humanize</a></li><li><a href="https://github.hubspot.com/teeble">Teeble</a></li></ul></div><div class="span3"><h3>Development Team</h3><ul><li><a href="https://dev.hubspot.com/?__hstc=114332689.aca2effae73416fc64c233860941600a.1409566431468.1409573433652.1409579429350.3&__hssc=114332689.1.1409579429350&__hsfp=140821128">Home</a></li><li><a href="https://dev.hubspot.com/teams?__hstc=114332689.aca2effae73416fc64c233860941600a.1409566431468.1409573433652.1409579429350.3&__hssc=114332689.1.1409579429350&__hsfp=140821128">Teams</a></li><li><a href="https://dev.hubspot.com/people?__hstc=114332689.aca2effae73416fc64c233860941600a.1409566431468.1409573433652.1409579429350.3&__hssc=114332689.1.1409579429350&__hsfp=140821128">People</a></li><li><a href="https://dev.hubspot.com/jobs?__hstc=114332689.aca2effae73416fc64c233860941600a.1409566431468.1409573433652.1409579429350.3&__hssc=114332689.1.1409579429350&__hsfp=140821128">Jobs</a></li></ul></div><div class="span3 hidden-phone"><h3>Developer API</h3><ul><li><a href="https://developers.hubspot.com/">Developer Documentation</a></li></ul></div></div></div><!-- Start of Async HubSpot Analytics Code -->
<script type="text/javascript"> (function(d,s,i,r) { if (d.getElementById(i)){return;} var n=d.createElement(s),e=d.getElementsByTagName(s)[0]; n.id=i;n.src='//js.hubspot.com/analytics/'+(Math.ceil(new Date()/r)*r)+'/51294.js'; e.parentNode.insertBefore(n, e); })(document,"script","hs-analytics",300000);
</script>
<!-- End of Async HubSpot Analytics Code -->
<script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-45159009-1', 'auto'); ga('send', 'pageview');
</script>
<div id="window-resizer-tooltip" style="display: none;"><a href="#" title="Edit settings" style="background-image: url(chrome-extension://kkelicaakdanhinjdeammmilcgefonfh/images/icon_19.png);"></a><span class="tooltipTitle">Window size: </span><span class="tooltipWidth" id="winWidth">1920</span> x <span class="tooltipHeight" id="winHeight">1056</span><br><span class="tooltipTitle">Viewport size: </span><span class="tooltipWidth" id="vpWidth">1920</span> x <span class="tooltipHeight" id="vpHeight">657</span></div></body></html> <script src="js/index.js"></script>
</body>
</html>
Pace - Script Codes CSS Codes
.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: #29d; position: fixed; z-index: 2000; top: 0; left: 0; height: 2px; -webkit-transition: width 1s; -moz-transition: width 1s; -o-transition: width 1s; transition: width 1s;
}
.pace .pace-progress-inner { display: block; position: absolute; right: 0px; width: 100px; height: 100%; box-shadow: 0 0 10px #29d, 0 0 5px #29d; opacity: 1.0; -webkit-transform: rotate(3deg) translate(0px, -4px); -moz-transform: rotate(3deg) translate(0px, -4px); -ms-transform: rotate(3deg) translate(0px, -4px); -o-transform: rotate(3deg) translate(0px, -4px); transform: rotate(3deg) translate(0px, -4px);
}
.pace .pace-activity { display: block; position: fixed; z-index: 2000; top: 15px; right: 15px; width: 14px; height: 14px; border: solid 2px transparent; border-top-color: #29d; border-left-color: #29d; border-radius: 10px; -webkit-animation: pace-spinner 400ms linear infinite; -moz-animation: pace-spinner 400ms linear infinite; -ms-animation: pace-spinner 400ms linear infinite; -o-animation: pace-spinner 400ms linear infinite; animation: pace-spinner 400ms linear infinite;
}
@-webkit-keyframes pace-spinner { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-moz-keyframes pace-spinner { 0% { -moz-transform: rotate(0deg); transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
}
@-o-keyframes pace-spinner { 0% { -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@-ms-keyframes pace-spinner { 0% { -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes pace-spinner { 0% { transform: rotate(0deg); transform: rotate(0deg); } 100% { transform: rotate(360deg); transform: rotate(360deg); }
}Pace - Script Codes JS Codes
/*! pace 0.5.6 */
(function(){var a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W=[].slice,X={}.hasOwnProperty,Y=function(a,b){function c(){this.constructor=a}for(var d in b)X.call(b,d)&&(a[d]=b[d]);return c.prototype=b.prototype,a.prototype=new c,a.__super__=b.prototype,a},Z=[].indexOf||function(a){for(var b=0,c=this.length;c>b;b++)if(b in this&&this[b]===a)return b;return-1};for(t={catchupTime:500,initialRate:.03,minTime:500,ghostTime:500,maxProgressPerFrame:10,easeFactor:1.25,startOnPageLoad:!0,restartOnPushState:!0,restartOnRequestAfter:500,target:"body",elements:{checkInterval:100,selectors:["body"]},eventLag:{minSamples:10,sampleCount:3,lagThreshold:3},ajax:{trackMethods:["GET"],trackWebSockets:!0,ignoreURLs:[]}},B=function(){var a;return null!=(a="undefined"!=typeof performance&&null!==performance&&"function"==typeof performance.now?performance.now():void 0)?a:+new Date},D=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame,s=window.cancelAnimationFrame||window.mozCancelAnimationFrame,null==D&&(D=function(a){return setTimeout(a,50)},s=function(a){return clearTimeout(a)}),F=function(a){var b,c;return b=B(),(c=function(){var d;return d=B()-b,d>=33?(b=B(),a(d,function(){return D(c)})):setTimeout(c,33-d)})()},E=function(){var a,b,c;return c=arguments[0],b=arguments[1],a=3<=arguments.length?W.call(arguments,2):[],"function"==typeof c[b]?c[b].apply(c,a):c[b]},u=function(){var a,b,c,d,e,f,g;for(b=arguments[0],d=2<=arguments.length?W.call(arguments,1):[],f=0,g=d.length;g>f;f++)if(c=d[f])for(a in c)X.call(c,a)&&(e=c[a],null!=b[a]&&"object"==typeof b[a]&&null!=e&&"object"==typeof e?u(b[a],e):b[a]=e);return b},p=function(a){var b,c,d,e,f;for(c=b=0,e=0,f=a.length;f>e;e++)d=a[e],c+=Math.abs(d),b++;return c/b},w=function(a,b){var c,d,e;if(null==a&&(a="options"),null==b&&(b=!0),e=document.querySelector("[data-pace-"+a+"]")){if(c=e.getAttribute("data-pace-"+a),!b)return c;try{return JSON.parse(c)}catch(f){return d=f,"undefined"!=typeof console&&null!==console?console.error("Error parsing inline pace options",d):void 0}}},g=function(){function a(){}return a.prototype.on=function(a,b,c,d){var e;return null==d&&(d=!1),null==this.bindings&&(this.bindings={}),null==(e=this.bindings)[a]&&(e[a]=[]),this.bindings[a].push({handler:b,ctx:c,once:d})},a.prototype.once=function(a,b,c){return this.on(a,b,c,!0)},a.prototype.off=function(a,b){var c,d,e;if(null!=(null!=(d=this.bindings)?d[a]:void 0)){if(null==b)return delete this.bindings[a];for(c=0,e=[];c<this.bindings[a].length;)e.push(this.bindings[a][c].handler===b?this.bindings[a].splice(c,1):c++);return e}},a.prototype.trigger=function(){var a,b,c,d,e,f,g,h,i;if(c=arguments[0],a=2<=arguments.length?W.call(arguments,1):[],null!=(g=this.bindings)?g[c]:void 0){for(e=0,i=[];e<this.bindings[c].length;)h=this.bindings[c][e],d=h.handler,b=h.ctx,f=h.once,d.apply(null!=b?b:this,a),i.push(f?this.bindings[c].splice(e,1):e++);return i}},a}(),null==window.Pace&&(window.Pace={}),u(Pace,g.prototype),C=Pace.options=u({},t,window.paceOptions,w()),T=["ajax","document","eventLag","elements"],P=0,R=T.length;R>P;P++)J=T[P],C[J]===!0&&(C[J]=t[J]);i=function(a){function b(){return U=b.__super__.constructor.apply(this,arguments)}return Y(b,a),b}(Error),b=function(){function a(){this.progress=0}return a.prototype.getElement=function(){var a;if(null==this.el){if(a=document.querySelector(C.target),!a)throw new i;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>',null!=a.firstChild?a.insertBefore(this.el,a.firstChild):a.appendChild(this.el)}return this.el},a.prototype.finish=function(){var a;return a=this.getElement(),a.className=a.className.replace("pace-active",""),a.className+=" pace-inactive",document.body.className=document.body.className.replace("pace-running",""),document.body.className+=" pace-done"},a.prototype.update=function(a){return this.progress=a,this.render()},a.prototype.destroy=function(){try{this.getElement().parentNode.removeChild(this.getElement())}catch(a){i=a}return this.el=void 0},a.prototype.render=function(){var a,b;return null==document.querySelector(C.target)?!1:(a=this.getElement(),a.children[0].style.width=""+this.progress+"%",(!this.lastRenderedProgress||this.lastRenderedProgress|0!==this.progress|0)&&(a.children[0].setAttribute("data-progress-text",""+(0|this.progress)+"%"),this.progress>=100?b="99":(b=this.progress<10?"0":"",b+=0|this.progress),a.children[0].setAttribute("data-progress",""+b)),this.lastRenderedProgress=this.progress)},a.prototype.done=function(){return this.progress>=100},a}(),h=function(){function a(){this.bindings={}}return a.prototype.trigger=function(a,b){var c,d,e,f,g;if(null!=this.bindings[a]){for(f=this.bindings[a],g=[],d=0,e=f.length;e>d;d++)c=f[d],g.push(c.call(this,b));return g}},a.prototype.on=function(a,b){var c;return null==(c=this.bindings)[a]&&(c[a]=[]),this.bindings[a].push(b)},a}(),O=window.XMLHttpRequest,N=window.XDomainRequest,M=window.WebSocket,v=function(a,b){var c,d,e,f;f=[];for(d in b.prototype)try{e=b.prototype[d],f.push(null==a[d]&&"function"!=typeof e?a[d]=e:void 0)}catch(g){c=g}return f},z=[],Pace.ignore=function(){var a,b,c;return b=arguments[0],a=2<=arguments.length?W.call(arguments,1):[],z.unshift("ignore"),c=b.apply(null,a),z.shift(),c},Pace.track=function(){var a,b,c;return b=arguments[0],a=2<=arguments.length?W.call(arguments,1):[],z.unshift("track"),c=b.apply(null,a),z.shift(),c},I=function(a){var b;if(null==a&&(a="GET"),"track"===z[0])return"force";if(!z.length&&C.ajax){if("socket"===a&&C.ajax.trackWebSockets)return!0;if(b=a.toUpperCase(),Z.call(C.ajax.trackMethods,b)>=0)return!0}return!1},j=function(a){function b(){var a,c=this;b.__super__.constructor.apply(this,arguments),a=function(a){var b;return b=a.open,a.open=function(d,e){return I(d)&&c.trigger("request",{type:d,url:e,request:a}),b.apply(a,arguments)}},window.XMLHttpRequest=function(b){var c;return c=new O(b),a(c),c};try{v(window.XMLHttpRequest,O)}catch(d){}if(null!=N){window.XDomainRequest=function(){var b;return b=new N,a(b),b};try{v(window.XDomainRequest,N)}catch(d){}}if(null!=M&&C.ajax.trackWebSockets){window.WebSocket=function(a,b){var d;return d=null!=b?new M(a,b):new M(a),I("socket")&&c.trigger("request",{type:"socket",url:a,protocols:b,request:d}),d};try{v(window.WebSocket,M)}catch(d){}}}return Y(b,a),b}(h),Q=null,x=function(){return null==Q&&(Q=new j),Q},H=function(a){var b,c,d,e;for(e=C.ajax.ignoreURLs,c=0,d=e.length;d>c;c++)if(b=e[c],"string"==typeof b){if(-1!==a.indexOf(b))return!0}else if(b.test(a))return!0;return!1},x().on("request",function(b){var c,d,e,f,g;return f=b.type,e=b.request,g=b.url,H(g)?void 0:Pace.running||C.restartOnRequestAfter===!1&&"force"!==I(f)?void 0:(d=arguments,c=C.restartOnRequestAfter||0,"boolean"==typeof c&&(c=0),setTimeout(function(){var b,c,g,h,i,j;if(b="socket"===f?e.readyState<2:0<(h=e.readyState)&&4>h){for(Pace.restart(),i=Pace.sources,j=[],c=0,g=i.length;g>c;c++){if(J=i[c],J instanceof a){J.watch.apply(J,d);break}j.push(void 0)}return j}},c))}),a=function(){function a(){var a=this;this.elements=[],x().on("request",function(){return a.watch.apply(a,arguments)})}return a.prototype.watch=function(a){var b,c,d,e;return d=a.type,b=a.request,e=a.url,H(e)?void 0:(c="socket"===d?new m(b):new n(b),this.elements.push(c))},a}(),n=function(){function a(a){var b,c,d,e,f,g,h=this;if(this.progress=0,null!=window.ProgressEvent)for(c=null,a.addEventListener("progress",function(a){return h.progress=a.lengthComputable?100*a.loaded/a.total:h.progress+(100-h.progress)/2}),g=["load","abort","timeout","error"],d=0,e=g.length;e>d;d++)b=g[d],a.addEventListener(b,function(){return h.progress=100});else f=a.onreadystatechange,a.onreadystatechange=function(){var b;return 0===(b=a.readyState)||4===b?h.progress=100:3===a.readyState&&(h.progress=50),"function"==typeof f?f.apply(null,arguments):void 0}}return a}(),m=function(){function a(a){var b,c,d,e,f=this;for(this.progress=0,e=["error","open"],c=0,d=e.length;d>c;c++)b=e[c],a.addEventListener(b,function(){return f.progress=100})}return a}(),d=function(){function a(a){var b,c,d,f;for(null==a&&(a={}),this.elements=[],null==a.selectors&&(a.selectors=[]),f=a.selectors,c=0,d=f.length;d>c;c++)b=f[c],this.elements.push(new e(b))}return a}(),e=function(){function a(a){this.selector=a,this.progress=0,this.check()}return a.prototype.check=function(){var a=this;return document.querySelector(this.selector)?this.done():setTimeout(function(){return a.check()},C.elements.checkInterval)},a.prototype.done=function(){return this.progress=100},a}(),c=function(){function a(){var a,b,c=this;this.progress=null!=(b=this.states[document.readyState])?b:100,a=document.onreadystatechange,document.onreadystatechange=function(){return null!=c.states[document.readyState]&&(c.progress=c.states[document.readyState]),"function"==typeof a?a.apply(null,arguments):void 0}}return a.prototype.states={loading:0,interactive:50,complete:100},a}(),f=function(){function a(){var a,b,c,d,e,f=this;this.progress=0,a=0,e=[],d=0,c=B(),b=setInterval(function(){var g;return g=B()-c-50,c=B(),e.push(g),e.length>C.eventLag.sampleCount&&e.shift(),a=p(e),++d>=C.eventLag.minSamples&&a<C.eventLag.lagThreshold?(f.progress=100,clearInterval(b)):f.progress=100*(3/(a+3))},50)}return a}(),l=function(){function a(a){this.source=a,this.last=this.sinceLastUpdate=0,this.rate=C.initialRate,this.catchup=0,this.progress=this.lastProgress=0,null!=this.source&&(this.progress=E(this.source,"progress"))}return a.prototype.tick=function(a,b){var c;return null==b&&(b=E(this.source,"progress")),b>=100&&(this.done=!0),b===this.last?this.sinceLastUpdate+=a:(this.sinceLastUpdate&&(this.rate=(b-this.last)/this.sinceLastUpdate),this.catchup=(b-this.progress)/C.catchupTime,this.sinceLastUpdate=0,this.last=b),b>this.progress&&(this.progress+=this.catchup*a),c=1-Math.pow(this.progress/100,C.easeFactor),this.progress+=c*this.rate*a,this.progress=Math.min(this.lastProgress+C.maxProgressPerFrame,this.progress),this.progress=Math.max(0,this.progress),this.progress=Math.min(100,this.progress),this.lastProgress=this.progress,this.progress},a}(),K=null,G=null,q=null,L=null,o=null,r=null,Pace.running=!1,y=function(){return C.restartOnPushState?Pace.restart():void 0},null!=window.history.pushState&&(S=window.history.pushState,window.history.pushState=function(){return y(),S.apply(window.history,arguments)}),null!=window.history.replaceState&&(V=window.history.replaceState,window.history.replaceState=function(){return y(),V.apply(window.history,arguments)}),k={ajax:a,elements:d,document:c,eventLag:f},(A=function(){var a,c,d,e,f,g,h,i;for(Pace.sources=K=[],g=["ajax","elements","document","eventLag"],c=0,e=g.length;e>c;c++)a=g[c],C[a]!==!1&&K.push(new k[a](C[a]));for(i=null!=(h=C.extraSources)?h:[],d=0,f=i.length;f>d;d++)J=i[d],K.push(new J(C));return Pace.bar=q=new b,G=[],L=new l})(),Pace.stop=function(){return Pace.trigger("stop"),Pace.running=!1,q.destroy(),r=!0,null!=o&&("function"==typeof s&&s(o),o=null),A()},Pace.restart=function(){return Pace.trigger("restart"),Pace.stop(),Pace.start()},Pace.go=function(){var a;return Pace.running=!0,q.render(),a=B(),r=!1,o=F(function(b,c){var d,e,f,g,h,i,j,k,m,n,o,p,s,t,u,v;for(k=100-q.progress,e=o=0,f=!0,i=p=0,t=K.length;t>p;i=++p)for(J=K[i],n=null!=G[i]?G[i]:G[i]=[],h=null!=(v=J.elements)?v:[J],j=s=0,u=h.length;u>s;j=++s)g=h[j],m=null!=n[j]?n[j]:n[j]=new l(g),f&=m.done,m.done||(e++,o+=m.tick(b));return d=o/e,q.update(L.tick(b,d)),q.done()||f||r?(q.update(100),Pace.trigger("done"),setTimeout(function(){return q.finish(),Pace.running=!1,Pace.trigger("hide")},Math.max(C.ghostTime,Math.max(C.minTime-(B()-a),0)))):c()})},Pace.start=function(a){u(C,a),Pace.running=!0;try{q.render()}catch(b){i=b}return document.querySelector(".pace")?(Pace.trigger("start"),Pace.go()):setTimeout(Pace.start,50)},"function"==typeof define&&define.amd?define(function(){return Pace}):"object"==typeof exports?module.exports=Pace:C.startOnPageLoad&&Pace.start()}).call(this);
| Developer | Nikita Zubarets |
| Username | snapson |
| Uploaded | September 11, 2022 |
| Rating | 3 |
| Size | 12,479 Kb |
| Views | 34,408 |
Do you need developer help for Pace?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Nikita Zubarets (snapson) Script Codes
| Name | Size |
| Work tickets | 14,081 Kb |
| CSS accordion | 2,428 Kb |
| Jquery max height my own plugin | 1,530 Kb |
| JScroll test | 1,493 Kb |
| THREE js | 1,955 Kb |
| Yandex map testing | 2,047 Kb |
| A zero-indexed array | 2,639 Kb |
| First lesson task | 2,283 Kb |
| Signature | 1,763 Kb |
| Conditional comments | 1,426 Kb |
Create amazing captions with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| LBCA - Mail canvas | Emnbdx | 3,856 Kb |
| 3D Text in Sass | Bookcasey | 2,766 Kb |
| A Pen by Jonas Bjork | Jonasbjork | 3,115 Kb |
| Polygon Dodecahedron in CSS | Vennsoh | 7,606 Kb |
| Popup Modal | Aldlevine | 3,696 Kb |
| A Pen by Anoop | Anoopjohn | 330,760 Kb |
| Canvas Orbital Trails v2 | Jackrugile | 3,421 Kb |
| Colorful Sliders | Chanrith | 1,246 Kb |
| Experiments with Vertical Centering | KatieK2 | 3,924 Kb |
| Importable Clearfix | Corysimmons | 1,411 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!