Convert Figma logo to code with AI

CodeByZach logopace

Automatically add a progress bar to your site.

15,677
1,904
15,677
278
View on GitHubView on NPM

Top Related Projects

CodeByZach's avatar

pace

15,677

Automatically add a progress bar to your site.

usablica's avatar

progress.js

2,369

ProgressJs is a JavaScript and CSS3 library which help developers to create and manage progress bar for every objects on the page.

rstacruz's avatar

nprogress

26,055

For slim progress bars like on YouTube, Medium, etc

tobiasahlin's avatar

SpinKit

19,349

A collection of loading indicators animated with CSS

kimmobrunfeldt's avatar

progressbar.js

7,785

Responsive and slick progress bars

Quick Overview

Pace.js is a lightweight JavaScript library that automatically adds progress bars to your web pages. It provides a visual indication of page load progress, enhancing user experience by giving feedback during navigation and AJAX requests.

Pros

  • Easy to implement with minimal configuration required
  • Customizable appearance with various themes and colors
  • Automatically detects and tracks AJAX requests and page loads
  • Lightweight and has no dependencies

Cons

  • May not accurately represent actual page load progress in all scenarios
  • Limited control over specific progress tracking for complex applications
  • Can potentially interfere with other JavaScript libraries if not properly integrated
  • Lacks advanced features for very specific use cases

Code Examples

  1. Basic implementation:
<script src="pace.min.js"></script>
<link href="themes/blue/pace-theme-minimal.css" rel="stylesheet" />

This code adds Pace.js to your HTML file with a minimal blue theme.

  1. Customizing options:
Pace.options = {
  restartOnRequestAfter: 500,
  ajax: {
    trackMethods: ['GET', 'POST', 'DELETE']
  }
};

This example configures Pace to restart the progress bar 500ms after a request and track specific AJAX methods.

  1. Handling Pace events:
Pace.on('done', function() {
  console.log('Page fully loaded');
});

Pace.on('hide', function() {
  console.log('Progress bar hidden');
});

This code demonstrates how to listen for Pace events and execute custom functions when the page is fully loaded or the progress bar is hidden.

Getting Started

To get started with Pace.js:

  1. Download pace.min.js and a theme CSS file from the GitHub repository.
  2. Include the files in your HTML:
<head>
  <script src="pace.min.js"></script>
  <link href="themes/blue/pace-theme-minimal.css" rel="stylesheet" />
</head>
  1. Pace will automatically start working on your page. You can customize its behavior by setting options:
Pace.options = {
  // Customize Pace options here
};

That's it! Pace.js will now add a progress bar to your web pages.

Competitor Comparisons

CodeByZach logo

pace

15,677

Automatically add a progress bar to your site.

Pros of pace

  • Lightweight and easy to use progress bar library
  • Supports multiple themes and customization options
  • Well-documented with clear examples

Cons of pace

  • Limited to progress bar functionality
  • May not be suitable for complex loading scenarios
  • Requires manual integration with other libraries for advanced features

Code Comparison

Both repositories appear to be the same project, so there isn't a meaningful code comparison to make. The CodeByZach/pace repository is likely the main repository for the Pace.js library.

Summary

Pace is a popular progress bar library for websites and web applications. It automatically adds a progress bar to your site, showing loading progress without requiring manual configuration. The library is lightweight, easy to implement, and offers various themes and customization options.

However, Pace is primarily focused on progress bar functionality, which may limit its use in more complex loading scenarios. For advanced features or integration with specific frameworks, additional work or complementary libraries might be necessary.

Since both repositories mentioned in the prompt appear to be the same project, there are no significant differences to highlight between them. Users interested in implementing Pace should refer to the official documentation and examples provided in the repository for the most up-to-date information and usage guidelines.

usablica logo

progress.js

2,369

ProgressJs is a JavaScript and CSS3 library which help developers to create and manage progress bar for every objects on the page.

Pros of progress.js

  • Lightweight and simple to use, with minimal configuration required
  • Supports both horizontal and vertical progress bars
  • Allows for custom styling and themes

Cons of progress.js

  • Less feature-rich compared to pace
  • Not automatically triggered by AJAX requests
  • Requires manual updates to progress value

Code Comparison

progress.js:

var progressBar = new ProgressBar('progress');
progressBar.setPercent(50);

pace:

Pace.start();
// Automatically tracks AJAX requests and page load progress

Summary

progress.js is a lightweight and simple progress bar library that offers basic functionality with easy customization. It's suitable for projects that require manual control over progress updates and don't need automatic AJAX request tracking.

pace, on the other hand, provides a more comprehensive solution with automatic progress tracking for AJAX requests and page loads. It offers a wider range of features and customization options but may be considered overkill for simpler projects.

The choice between the two libraries depends on the specific requirements of your project, such as the need for automatic progress tracking, desired level of customization, and overall complexity.

rstacruz logo

nprogress

26,055

For slim progress bars like on YouTube, Medium, etc

Pros of nprogress

  • Lightweight and minimalistic, with a smaller file size
  • Easier to customize appearance through CSS
  • Provides a spinner option for additional visual feedback

Cons of nprogress

  • Less feature-rich compared to pace
  • Requires manual triggering of progress updates
  • Limited browser support for older versions

Code Comparison

nprogress:

NProgress.start();
NProgress.done();

pace:

Pace.start();
Pace.stop();

Both libraries offer simple APIs for starting and stopping progress indicators. However, pace automatically detects Ajax requests and route changes in many frameworks, while nprogress requires manual updates.

nprogress focuses on simplicity and customization, making it ideal for projects that need a lightweight solution with easy styling options. pace offers more features out of the box, including automatic progress detection and a wider range of progress indicators, but comes with a larger file size and more complex configuration.

The choice between these libraries depends on the specific needs of your project, balancing simplicity and customization against feature richness and automatic functionality.

tobiasahlin logo

SpinKit

19,349

A collection of loading indicators animated with CSS

Pros of SpinKit

  • Offers a wider variety of loading animations (12 different styles)
  • Provides pure CSS animations, reducing JavaScript dependencies
  • Includes SCSS source files for easier customization

Cons of SpinKit

  • Less focused on performance optimization compared to Pace
  • Lacks automatic progress tracking features
  • May require more manual implementation in complex applications

Code Comparison

SpinKit (CSS example):

.spinner {
  width: 40px;
  height: 40px;
  background-color: #333;
  margin: 100px auto;
  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
  animation: sk-rotateplane 1.2s infinite ease-in-out;
}

Pace (JavaScript example):

Pace.start({
  document: false,
  ajax: {
    trackMethods: ['GET', 'POST', 'DELETE', 'PUT', 'PATCH']
  }
});

SpinKit focuses on providing CSS-based loading animations, offering a variety of styles that can be easily implemented with minimal code. It's great for simple loading indicators but may require additional work for progress tracking.

Pace, on the other hand, is designed to automatically track progress and provide a loading bar. It's more suitable for applications that need to show overall page load progress or track multiple AJAX requests.

kimmobrunfeldt logo

progressbar.js

7,785

Responsive and slick progress bars

Pros of progressbar.js

  • Offers more customization options for progress bar appearance
  • Provides multiple shape options (line, circle, semi-circle)
  • Lightweight and focused solely on progress bars

Cons of progressbar.js

  • Requires manual integration and configuration
  • Less suitable for automatic page load progress tracking
  • Smaller community and fewer updates

Code Comparison

progressbar.js:

var bar = new ProgressBar.Line('#container', {
  strokeWidth: 4,
  easing: 'easeInOut',
  duration: 1400,
  color: '#FFEA82',
  trailColor: '#eee',
  trailWidth: 1,
  svgStyle: {width: '100%', height: '100%'}
});

bar.animate(1.0);

pace:

Pace.start({
  document: false,
  ajax: false,
  eventLag: false,
  elements: {
    selectors: ['.my-page']
  }
});

Summary

progressbar.js offers more flexibility in terms of customization and shape options, making it ideal for projects requiring specific progress bar designs. However, it requires more manual setup and is less suited for automatic page load tracking.

pace, on the other hand, excels in providing automatic page load progress tracking with minimal configuration. It's more focused on overall page loading progress rather than individual progress bars.

The choice between the two depends on the specific requirements of your project, whether you need detailed customization or automatic page load tracking.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

PACE

Latest Release jsDelivr hits (npm) Stars Forks License

An automatic web page progress bar.

Demo

Documentation

Include pace.js and the theme css of your choice on your page (as early as possible), and you're done!

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!

If you use AMD or Browserify, require pace.js and call pace.start() as early in the loading process as possible.

Example

<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>

Configuration

Pace is fully automatic, no configuration is necessary to get started.

If you would like to make some tweaks, here's how:

You can set window.paceOptions before bringing in the file:

paceOptions = {
  // Disable the 'elements' source
  elements: false,

  // Only show the progress on regular and ajax-y page navigation,
  // not every request
  restartOnRequestAfter: false
}

You can also put options on the script tag:

<script data-pace-options='{ "ajax": false }' src="https://cdn.jsdelivr.net/npm/pace-js@latest/pace.min.js"></script>

If you're using AMD or Browserify, you can pass your options to start:

define(['pace'], function(pace){
  pace.start({
    document: false
  });
});

Themes

Pace includes a bunch of themes to get you started. Just include the appropriate css file. Send us a PR with any interesting themes you create.

If you have minor styling changes and don't want to extend theme css, you can add custom class names to the progress bar using the "className" option:

paceOptions = {
  className: 'my-custom-class'
}

Collectors

Collectors are the bits of code which gather progress information. Pace includes four default collectors:

  • Ajax

    Monitors all ajax requests on the page

  • Elements

    Checks for the existence of specific elements on the page

  • Document

    Checks the document readyState

  • Event Lag

    Checks for event loop lag signaling that javascript is being executed

They can each be configured or disabled through configuration options of the same name.

paceOptions = {
  ajax: false, // disabled
  document: false, // disabled
  eventLag: false, // disabled
  elements: {
    selectors: ['.my-page']
  }
};

Add your own classes to paceOptions.extraSources to add more sources. Each source should either have a .progress property, or a .elements property which is a list of objects with .progress properties. Pace will automatically handle all scaling to make the progress changes look smooth to the user.

Elements

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 separate the selectors to properly handle error states, where the progress bar should disappear, but the element we are looking for may never appear:

paceOptions = {
  elements: {
    selectors: ['.timeline, .timeline-error', '.user-profile, .profile-error']
  }
}

Pace will consider the elements test successful when each selector matches something. For this example, when either .timeline or .timeline-error exist, and either .user-profile or .profile-error exist.

Restart Rules

Most users want the progress bar to automatically restart when a pushState event occurs (generally means ajax navigation is occuring). You can disable this:

paceOptions = {
  restartOnPushState: false
}

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:

paceOptions = {
  restartOnRequestAfter: false
}

You can always trigger a restart manually by calling Pace.restart()

See the source for a full list of options.

API

Pace exposes the following methods:

  • Pace.start: Show the progress bar and start updating. Called automatically if you don't use AMD or CommonJS.

  • Pace.restart: Show the progress bar if it's hidden and start reporting the progress from scratch. Called automatically whenever pushState or replaceState is called by default.

  • Pace.stop: Hide the progress bar and stop updating it.

  • Pace.track: Explicitly track one or more requests, see Tracking below

  • Pace.ignore: Explicitly ignore one or more requests, see Tracking below

Events

Pace fires the following events:

  • start: When pace is initially started, or as a part of a restart
  • stop: When pace is manually stopped, or as a part of a restart
  • restart: When pace is restarted (manually, or by a new AJAX request)
  • done: When pace is finished
  • hide: When the pace is hidden (can be later than done, based on ghostTime and minTime)

You can bind onto events using the on, off and once methods:

  • Pace.on(event, handler, [context]): Call handler (optionally with context) when event is triggered
  • Pace.off(event, [handler]): Unbind the provided event and handler combination.
  • Pace.once(event, handler, [context]): Bind handler to the next (and only the next) incidence of event

Tracking

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.

You can disable all ajax tracking by setting ajax to false:

Pace.options = {
  ajax: false
}

You can disable ajax tracking except on page navigation by setting restartOnRequestAfter to false:

Pace.options = {
  restartOnRequestAfter: false
}

You can manually disable tracking for a specific request or requests by triggering them within a Pace.ignore callback:

Pace.ignore(function() {
  $.ajax(...)
});

You can force the progress bar to be shown for a specific request by triggering them within a Pace.track callback:

Pace.track(function() {
  $.ajax(...)
});

You can also ignore URLs based on a pattern:

Pace.options = {
  ajax: {
    ignoreURLs: ['some-substring', /some-regexp/]
  }
}

Dependencies

None!

Support

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.

Size

pace.js is 4kb minified and gzipped. The themes vary between 0.5 and 4kb.

Issues

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 create an Issue. If you can include a test case, that's even better.

Credits

HubSpot

CodeByZach

Javascript by Zack Bloom CSS by Adam Schwartz

Themes inspired by Mary Lou

Project inspired by nprogress

NPM DownloadsLast 30 Days