PACE — Automatic page load progress bars

⇪

What is Pace?

Include pace.js and a CSS theme of your choice, and you get a beautiful progress indicator for your page load and ajax navigation.

No need to hook into any of your code, progress is detected automatically.

Get Started

<head>
    <script src="https://cdn.jsdelivr.net/npm/pace-js@latest/pace.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pace-js@latest/pace-theme-default.min.css">
</head>

Themes

Download a theme in the color of your choosing:

Enter a color:

Submit a theme! Fork us on GitHub

Documentation

`; return getBlobURL(source, 'text/html'); }; $('.browser iframe').each(function(){ let current_iframe = this; current_iframe.src = getGeneratedPageURL('' + '

' + '

' + ''); setTimeout(function(){ initFrame(current_iframe); }, 500); }); $color.on('change keyup', function(){ var color = $(this).val(); updateColor(color); var css = '.section.colored, a.button { background: ' + color + '; } a, a:hover, a:active, .header .title .title2:before { color: ' + color + '; }'; if ($('html').hasClass('ie8-and-less')) { $('#app-colors').get(0).styleSheet.cssText = css; } else { $('#app-colors').html(css); } }); $('a.download-link').click(function(e){ e.preventDefault(); var theme = $(this).data('theme'); downloadTheme(theme); }); }; var initTimeout = setTimeout(function(){ $(window).unbind('scroll', scrollOnce); init(); }, 3000); var scrollOnce = function() { $(window).unbind('scroll', scrollOnce); clearTimeout(initTimeout); init(); }; $(window).bind('scroll', scrollOnce); }); setTimeout(function(){ document.body.className = 'page-loaded' }, 0);