HubSpot/pace
Pace
Pace is a page loading progress bar that monitors browser navigation and network requests to provide a visual loading indicator. It functions as a frontend navigation tracker and browser request monitor, tracking document states and URL patterns to drive the progress of a loading bar during page transitions.
The tool includes a customizable loading indicator with configurable themes and visual styles. It provides request tracking control to filter which specific network requests trigger the progress bar using global settings or URL patterns.
The system covers the monitoring of frontend requests and the management of progress bar states based on browser history changes. It also includes event listeners and the ability to define custom progress sources to trigger updates based on application logic.
Features
- Loading Indicators - Displays a visual progress bar to indicate loading states during network requests and page transitions.
- Page Load State Tracking - Tracks network requests and document states to drive the application loading progress indicator.
- Request Duration Monitors - Tracks document states and URL patterns to trigger visual updates based on the duration of network requests.
- Request Progress Indicators - Monitors network activity and document states to provide visual feedback for active web requests.
- Navigation State Trackers - Monitors browser history changes and page loads to drive the visual progress bar.
- Perceived Performance Enhancements - Improves perceived performance by providing immediate visual feedback during asynchronous data loading.
- Animation State Controllers - Controls the visibility and animation of the loading indicator based on request durations and history changes.
- Lifecycle Event Listeners - Implements event listeners to execute custom functions during different stages of the loading cycle.
- Page Transition Controls - Tracks network requests and document ready states to manage the visual flow during page transitions.
- Request Filtering Rules - Filters which network requests trigger the progress bar using global settings and URL patterns.
- 进度条/加载动画(Loading) - Listed in the “进度条/加载动画(Loading)” section of the Awesome Frontend awesome list.
- Loading Indicators - Automatic website progress bar.
