How do I change the Pace progress bar theme?

Include a different CSS file from the Pace theme library or add custom classes via the className option in paceOptions. The documentation provides multiple pre-built themes to choose from, such as default or minimal styles.

Pace vs NProgress: which should I use?

Pace offers automatic detection out of the box, while NProgress requires manual control. Choose Pace for hands-off setup on AJAX-heavy sites, but NProgress if you need finer-grained control over progress updates and animations.

How to disable Pace for certain AJAX calls?

Wrap the AJAX request in a Pace.ignore() callback or use the ignoreURLs option in configuration to exclude specific URLs from tracking. This is detailed in the README's tracking section.

Does Pace work with frameworks like React or Vue?

Yes, Pace can be integrated by including the script and CSS, but for optimal control in component-based apps, you may need to use the API methods like start and stop within lifecycle hooks, as it's not framework-specific.

How to manually restart the Pace progress bar?

Call Pace.restart() in your JavaScript code. This is useful for AJAX navigation or custom events where you want to reset the progress indicator, as mentioned in the API section of the README.

Why is Pace not showing on my single-page application?

Ensure Pace.start() is called early in the loading process, and check that AJAX tracking is enabled. For SPAs, you might need to handle route changes manually with Pace.restart() or adjust restartOnPushState options.

Open-Awesome

pace

MITCSSv1.2.4

Automatically add a customizable progress bar to your website that tracks page load and AJAX requests.

Visit Website GitHub

15.6k stars1.9k forks0 contributors

What is pace?

Pace is a JavaScript library that automatically adds a customizable progress bar to websites. It tracks page load progress by monitoring AJAX requests, document ready state, event loop lag, and specific DOM elements, providing visual feedback to users during navigation and content loading.

Target Audience

Frontend developers and web designers looking to improve perceived performance and user experience on websites with dynamic content or AJAX-heavy navigation.

Value Proposition

Developers choose Pace for its automatic progress detection with zero configuration, lightweight footprint (4kb gzipped), and extensive customization options via themes and APIs, eliminating manual progress tracking code.

Overview

Automatically add a progress bar to your site.

Use Cases

Best For

Adding visual loading indicators to single-page applications (SPAs)
Improving perceived performance on AJAX-heavy websites
Providing user feedback during dynamic content loading
Enhancing user experience on slow network connections
Customizing progress bar themes to match site design
Tracking page load progress without manual event handling

Not Ideal For

Server-side rendered applications that prioritize zero JavaScript footprint
Projects requiring precise, manual control over progress bar timing and animations
Websites already integrated with comprehensive performance monitoring tools

Pros & Cons

Pros

Automatic Progress Detection

Monitors AJAX requests, document ready state, event loop lag, and DOM elements without any configuration, as highlighted in the README's key features.

Easy Customization

Includes multiple pre-built themes and allows custom CSS classes via the className option, making it simple to match site aesthetics.

Flexible Configuration

Offers options to disable specific collectors like ajax or elements and set restart rules through JavaScript or HTML attributes.

Broad Browser Support

Works on IE8+ and all modern browsers with no external dependencies, ensuring compatibility across a wide range of environments.

Cons

Detection Accuracy Issues

The automatic progress estimation can be unreliable for complex or non-standard page loads, as the README admits it hasn't been tested on every website and invites issue reports.

JavaScript-Only Solution

Requires JavaScript to function, making it ineffective for users with JS disabled or in server-rendered contexts without client-side enhancement.

Potential Performance Overhead

Continuous monitoring of AJAX requests and event loop lag adds computational cost, which could impact page load times on resource-constrained devices.

Frequently Asked Questions

Related Projects

SpinKit

A collection of loading indicators animated with CSS

Stars19,372

Forks1,777

Last commit5 years ago

Spin.js

A spinning activity indicator

Stars9,274

Forks1,008

Last commit1 year ago

Progressbar.js

Responsive and slick progress bars

Stars7,864

Forks1,380