{"id":13397228,"url":"https://github.com/CodeByZach/pace","last_synced_at":"2025-03-13T23:32:14.441Z","repository":{"id":10569536,"uuid":"12774825","full_name":"CodeByZach/pace","owner":"CodeByZach","description":"Automatically add a progress bar to your site.","archived":false,"fork":false,"pushed_at":"2024-02-26T22:12:24.000Z","size":1438,"stargazers_count":15638,"open_issues_count":278,"forks_count":1906,"subscribers_count":381,"default_branch":"master","last_synced_at":"2024-05-22T07:02:39.119Z","etag":null,"topics":["loading-animation","loading-bar","loading-indicator","pace","pace-js","progress-bar"],"latest_commit_sha":null,"homepage":"https://codebyzach.github.io/pace/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CodeByZach.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2013-09-12T04:24:29.000Z","updated_at":"2024-05-21T13:30:54.000Z","dependencies_parsed_at":"2024-04-09T13:14:12.677Z","dependency_job_id":"4380f9b9-7d11-4169-a607-3a78442c2d93","html_url":"https://github.com/CodeByZach/pace","commit_stats":{"total_commits":377,"total_committers":47,"mean_commits":8.02127659574468,"dds":0.5517241379310345,"last_synced_commit":"2350e563a7c899deb2b93903bee7164921018b2b"},"previous_names":["hubspot/pace"],"tags_count":46,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeByZach%2Fpace","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeByZach%2Fpace/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeByZach%2Fpace/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeByZach%2Fpace/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CodeByZach","download_url":"https://codeload.github.com/CodeByZach/pace/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243500248,"owners_count":20300761,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["loading-animation","loading-bar","loading-indicator","pace","pace-js","progress-bar"],"created_at":"2024-07-30T18:01:13.176Z","updated_at":"2025-03-13T23:32:13.767Z","avatar_url":"https://github.com/CodeByZach.png","language":"CSS","readme":"PACE\n====\n[![Latest Release](https://img.shields.io/github/tag/CodeByZach/pace.svg?label=release)](https://github.com/CodeByZach/pace/releases/latest) [![jsDelivr hits (npm)](https://img.shields.io/jsdelivr/npm/hm/pace-js?color=%23ff5627)](https://www.jsdelivr.com/package/npm/pace-js) [![Stars](https://img.shields.io/github/stars/CodeByZach/pace.svg)](https://github.com/CodeByZach/pace/stargazers) [![Forks](https://img.shields.io/github/forks/CodeByZach/pace.svg)](https://github.com/CodeByZach/pace/network/members) [![License](https://img.shields.io/github/license/CodeByZach/pace.svg)](LICENSE)\n\nAn automatic web page progress bar.\n\n### [Demo](https://codebyzach.github.io/pace/)\n### [Documentation](https://codebyzach.github.io/pace/docs/)\n\nInclude [pace.js](https://cdn.jsdelivr.net/npm/pace-js@latest/pace.min.js) and the\n[theme](https://codebyzach.github.io/pace/) css of your choice on your page\n(as early as possible), and you're done!\n\nPace will automatically monitor your ajax requests, event loop lag, document\nready state, and elements on your page to decide the progress. On ajax navigation\nit will begin again!\n\nIf you use AMD or Browserify, require pace.js and call `pace.start()` as early in the loading process as possible.\n\nExample\n-------\n\n```html\n\u003chead\u003e\n  \u003cscript src=\"https://cdn.jsdelivr.net/npm/pace-js@latest/pace.min.js\"\u003e\u003c/script\u003e\n  \u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/pace-js@latest/pace-theme-default.min.css\"\u003e\n\u003c/head\u003e\n```\n\nConfiguration\n-------------\n\nPace is fully automatic, no configuration is necessary to get started.\n\nIf you would like to make some tweaks, here's how:\n\nYou can set `window.paceOptions` before bringing in the file:\n\n```javascript\npaceOptions = {\n  // Disable the 'elements' source\n  elements: false,\n\n  // Only show the progress on regular and ajax-y page navigation,\n  // not every request\n  restartOnRequestAfter: false\n}\n```\n\nYou can also put options on the script tag:\n\n```html\n\u003cscript data-pace-options='{ \"ajax\": false }' src=\"https://cdn.jsdelivr.net/npm/pace-js@latest/pace.min.js\"\u003e\u003c/script\u003e\n```\n\nIf you're using AMD or Browserify, you can pass your options to `start`:\n\n```javascript\ndefine(['pace'], function(pace){\n  pace.start({\n    document: false\n  });\n});\n```\n\nThemes\n------\n\nPace includes a bunch of [themes](https://codebyzach.github.io/pace/)\nto get you started. Just include the appropriate css file. Send us a PR with\nany interesting themes you create.\n\nIf you have minor styling changes and don't want to extend theme css, you can add custom class names to\nthe progress bar using the \"className\" option:\n\n```javascript\npaceOptions = {\n  className: 'my-custom-class'\n}\n```\n\nCollectors\n----------\n\nCollectors are the bits of code which gather progress information. Pace includes four default collectors:\n\n- Ajax\n\n  Monitors all ajax requests on the page\n\n- Elements\n\n  Checks for the existence of specific elements on the page\n\n- Document\n\n  Checks the document readyState\n\n- Event Lag\n\n  Checks for event loop lag signaling that javascript is being executed\n\nThey can each be configured or disabled through configuration options of the same name.\n\n```javascript\npaceOptions = {\n  ajax: false, // disabled\n  document: false, // disabled\n  eventLag: false, // disabled\n  elements: {\n    selectors: ['.my-page']\n  }\n};\n```\n\nAdd your own classes to `paceOptions.extraSources` to add more sources. Each source should either\nhave a `.progress` property, or a `.elements` property which is a list of objects with\n`.progress` properties. Pace will automatically handle all scaling to make the progress\nchanges look smooth to the user.\n\nElements\n--------\n\nElements being rendered to the screen is one way for us to decide that the page has been\nrendered. If you would like to use that source of information (not required at all),\nspecify one or more selectors. You can comma separate the selectors to properly handle\nerror states, where the progress bar should disappear, but the element we are looking for\nmay never appear:\n\n```javascript\npaceOptions = {\n  elements: {\n    selectors: ['.timeline, .timeline-error', '.user-profile, .profile-error']\n  }\n}\n```\n\nPace will consider the elements test successful when each selector matches something. For\nthis example, when either `.timeline` or `.timeline-error` exist, and either `.user-profile`\nor `.profile-error` exist.\n\nRestart Rules\n-------------\n\nMost users want the progress bar to automatically restart when a pushState event occurs\n(generally means ajax navigation is occuring). You can disable this:\n\n```javascript\npaceOptions = {\n  restartOnPushState: false\n}\n```\n\nYou can also have pace restart on every ajax request which lasts longer than x ms. You'll want to\ndisable this if you make ajax requests the user doesn't need to know about, like precaching:\n\n```javascript\npaceOptions = {\n  restartOnRequestAfter: false\n}\n```\n\nYou can always trigger a restart manually by calling `Pace.restart()`\n\nSee [the source](https://github.com/CodeByZach/pace/blob/master/pace.js) for a full list of options.\n\nAPI\n---\n\nPace exposes the following methods:\n\n- `Pace.start`: Show the progress bar and start updating. Called automatically if you don't use AMD or CommonJS.\n\n- `Pace.restart`: Show the progress bar if it's hidden and start reporting the progress from scratch. Called automatically\nwhenever `pushState` or `replaceState` is called by default.\n\n- `Pace.stop`: Hide the progress bar and stop updating it.\n\n- `Pace.track`: Explicitly track one or more requests, see Tracking below\n\n- `Pace.ignore`: Explicitly ignore one or more requests, see Tracking below\n\nEvents\n------\n\nPace fires the following events:\n\n- `start`: When pace is initially started, or as a part of a restart\n- `stop`: When pace is manually stopped, or as a part of a restart\n- `restart`: When pace is restarted (manually, or by a new AJAX request)\n- `done`: When pace is finished\n- `hide`: When the pace is hidden (can be later than `done`, based on `ghostTime` and `minTime`)\n\nYou can bind onto events using the `on`, `off` and `once` methods:\n\n- `Pace.on(event, handler, [context])`: Call `handler` (optionally with context) when `event` is triggered\n- `Pace.off(event, [handler])`: Unbind the provided `event` and `handler` combination.\n- `Pace.once(event, handler, [context])`: Bind `handler` to the next (and only the next) incidence of `event`\n\nTracking\n--------\n\nBy 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\n500ms.\n\nYou can disable all ajax tracking by setting `ajax` to false:\n\n```javascript\nPace.options = {\n  ajax: false\n}\n```\n\nYou can disable ajax tracking except on page navigation by setting `restartOnRequestAfter` to false:\n\n```javascript\nPace.options = {\n  restartOnRequestAfter: false\n}\n```\n\nYou can manually disable tracking for a specific request or requests by triggering them within a `Pace.ignore` callback:\n\n```javascript\nPace.ignore(function() {\n  $.ajax(...)\n});\n```\n\nYou can force the progress bar to be shown for a specific request by triggering them within a `Pace.track` callback:\n\n```javascript\nPace.track(function() {\n  $.ajax(...)\n});\n```\n\nYou can also ignore URLs based on a pattern:\n\n```javascript\nPace.options = {\n  ajax: {\n    ignoreURLs: ['some-substring', /some-regexp/]\n  }\n}\n```\n\nDependencies\n------------\n\nNone!\n\nSupport\n-------\n\nPace is designed to support IE8+ (standards mode), FF 3.5+, Chrome, Safari 4+, Opera 10.5+, and all modern\nmobile browsers. If you run into a compatibility issue, or can make a case for supporting something else,\nplease create an issue.\n\nSize\n----\n\npace.js is 4kb minified and gzipped. The themes vary between 0.5 and 4kb.\n\nIssues\n------\n\nWe have obviously not tested this on every website. If you run into an issue, or find a way the automatic\ndetection could be better, please [create an Issue](https://github.com/CodeByZach/pace/issues/new). If you can include a test case, that's even better.\n\nCredits\n-------\n\n[HubSpot](http://dev.hubspot.com)\n\n[CodeByZach](https://github.com/CodeByZach)\n\nJavascript by [Zack Bloom](http://twitter.com/zackbloom)\nCSS by [Adam Schwartz](http://twitter.com/adamfschwartz)\n\nThemes inspired by [Mary Lou](http://tympanus.net/codrops/2013/09/18/creative-loading-effects/)\n\nProject inspired by [nprogress](http://ricostacruz.com/nprogress/)\n","funding_links":[],"categories":["CSS","UI Components"],"sub_categories":["Progress/ Spinners/ Loaders"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FCodeByZach%2Fpace","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FCodeByZach%2Fpace","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FCodeByZach%2Fpace/lists"}