# CodeByZach/pace

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/codebyzach-pace).**

15,650 stars · 1,865 forks · CSS · mit

## Links

- GitHub: https://github.com/CodeByZach/pace
- Homepage: https://codebyzach.github.io/pace/
- awesome-repositories: https://awesome-repositories.com/repository/codebyzach-pace.md

## Topics

`loading-animation` `loading-bar` `loading-indicator` `pace` `pace-js` `progress-bar`

## Description

Pace is a browser-based utility that automatically monitors the loading state of web applications to provide visual feedback during page transitions and asynchronous operations. It functions as a frontend performance monitoring tool that tracks document readiness, network requests, and browser event loop activity to visualize progress without requiring manual markup changes.

The library distinguishes itself by using automated tracking mechanisms that hook into native browser objects and document lifecycle events. By employing a state-machine-driven controller, it manages the visibility of progress indicators based on real-time activity, injecting dynamic styles directly into the document head to render visual elements.

Users can customize the tracking behavior by defining specific element selectors, toggling data sources, and establishing custom rules for network request monitoring. The library also provides hooks to trigger manual lifecycle actions, allowing for integration with existing application logic to control when progress indicators appear or reset.

## Tags

### User Interface & Experience

- [Progress Indicators](https://awesome-repositories.com/f/user-interface-experience/progress-indicators.md) — Provides an automatic progress bar that monitors network requests and document readiness.
- [Loading Indicators](https://awesome-repositories.com/f/user-interface-experience/ui-components/feedback-overlay-components/loading-indicators.md) — Displays visual feedback during page transitions by tracking event loop activity and navigation events.
- [State-Driven UI Controllers](https://awesome-repositories.com/f/user-interface-experience/state-driven-ui-controllers.md) — Coordinates progress indicator visibility through a central controller that transitions between loading and idle states.
- [DOM Mutation Observers](https://awesome-repositories.com/f/user-interface-experience/dom-mutation-observers.md) — Uses mutation observers to detect document readiness and structural changes for triggering progress updates.

### Development Tools & Productivity

- [Progress Indicators](https://awesome-repositories.com/f/development-tools-productivity/progress-indicators.md) — Provides controls to start, stop, or restart progress indicators and attach custom logic to lifecycle events. ([source](https://codebyzach.github.io/pace/docs/))
- [Progress Tracking](https://awesome-repositories.com/f/development-tools-productivity/workflow-automation-tools/workflow-lifecycle-management/progress-tracking.md) — Automates progress tracking by monitoring background tasks without requiring manual intervention in application code.

### System Administration & Monitoring

- [Network Request Interceptors](https://awesome-repositories.com/f/system-administration-monitoring/network-monitoring-tools/network-request-interceptors.md) — Wraps native browser request objects to monitor active data transfers and calculate progress.
- [Performance Monitoring Tools](https://awesome-repositories.com/f/system-administration-monitoring/performance-monitoring-tools.md) — Measures and visualizes the loading state of web applications by hooking into document lifecycle events.
- [Web Performance Analyzers](https://awesome-repositories.com/f/system-administration-monitoring/monitoring-and-observability/web-performance-analyzers.md) — Monitors page loading states to provide visual feedback during network requests and document processing.
- [System Load Monitors](https://awesome-repositories.com/f/system-administration-monitoring/system-monitoring/system-load-monitors.md) — Tracks network requests and document readiness to automatically display progress during page loading. ([source](https://codebyzach.github.io/pace/docs/))

### Web Development

- [Lifecycle State Management](https://awesome-repositories.com/f/web-development/frontend-development-tools/state-data-management/component-lifecycle-utilities/state-preservation-controls/dialog-state-controllers/lifecycle-state-management.md) — Manages UI element visibility based on the status of network activity and browser event loops.