# chieffancypants/angular-loading-bar

**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/chieffancypants-angular-loading-bar).**

5,121 stars · 664 forks · JavaScript · MIT · archived

## Links

- GitHub: https://github.com/chieffancypants/angular-loading-bar
- Homepage: https://chieffancypants.github.io/angular-loading-bar/
- awesome-repositories: https://awesome-repositories.com/repository/chieffancypants-angular-loading-bar.md

## Description

angular-loading-bar is a loading state manager and progress bar component for Angular applications. It provides a system for visualizing network request activity through an automatic loading indicator that monitors outgoing HTTP requests.

The project manages concurrent network requests by bundling multiple API calls into a single loading state, ensuring the indicator remains visible until the final request completes. It includes a latency threshold to delay the appearance of the loading bar, which prevents visual flashing during fast requests.

The system supports URL pattern filtering to exclude specific background or polling calls from triggering the UI. It also provides manual state control, allowing the loading indicator to be started or stopped programmatically for tasks independent of network monitoring.

## Tags

### User Interface & Experience

- [Loading Progress Bars](https://awesome-repositories.com/f/user-interface-experience/loading-progress-bars.md) — Provides a visual loading progress bar for Angular applications that tracks asynchronous network requests.
- [User Interface & Experience](https://awesome-repositories.com/f/user-interface-experience.md) — Improves user experience by eliminating layout flicker during fast requests through latency thresholding.
- [Application Loading State Managers](https://awesome-repositories.com/f/user-interface-experience/application-loading-state-managers.md) — Provides a comprehensive system for managing and visualizing application loading states via automatic monitoring and manual triggers.
- [Concurrent Request Visualizations](https://awesome-repositories.com/f/user-interface-experience/concurrent-request-visualizations.md) — Bundles multiple concurrent API calls into a single loading state to simplify the perceived application performance.
- [Request State Tracking](https://awesome-repositories.com/f/user-interface-experience/request-state-tracking.md) — Tracks the number of active concurrent network requests to maintain the loading indicator until the final request completes.
- [Loading Indicators](https://awesome-repositories.com/f/user-interface-experience/loading-indicators.md) — Provides configurable visibility controls for the loading indicator to prevent flickering during fast network responses. ([source](https://cdn.jsdelivr.net/gh/chieffancypants/angular-loading-bar@master/README.md))
- [Manual Loading State Overrides](https://awesome-repositories.com/f/user-interface-experience/manual-loading-state-overrides.md) — Allows developers to manually start or stop the loading indicator for non-network background tasks.

### Networking & Communication

- [Outgoing Request Monitors](https://awesome-repositories.com/f/networking-communication/http-request-debugging/outgoing-request-monitors.md) — Monitors outgoing HTTP requests to provide real-time visual feedback on the status of data fetching.

### Software Engineering & Architecture

- [UI Request Bundling](https://awesome-repositories.com/f/software-engineering-architecture/request-batching/concurrent-request-grouping/ui-request-bundling.md) — Bundles multiple concurrent network requests into a single loading state to prevent multiple indicators from appearing. ([source](https://cdn.jsdelivr.net/gh/chieffancypants/angular-loading-bar@master/README.md))
- [UI Visibility Debouncing](https://awesome-repositories.com/f/software-engineering-architecture/function-execution-utilities/execution-debouncing/ui-visibility-debouncing.md) — Prevents the loading bar from flashing during very fast network requests by delaying its appearance until a threshold is reached.

### Web Development

- [HTTP Request Interceptors](https://awesome-repositories.com/f/web-development/http-request-interceptors.md) — Implements an HTTP interceptor to automatically trigger and manage the loading state based on outgoing network requests.
- [Loading Indicator Interceptors](https://awesome-repositories.com/f/web-development/http-request-interceptors/loading-indicator-interceptors.md) — Automatically triggers the loading progress bar by hooking into the Angular HTTP request pipeline.
- [Loading State Indicators](https://awesome-repositories.com/f/web-development/asynchronous-state-management/loading-state-indicators.md) — Allows programmatic control over the loading state indicators to reflect non-network background activity. ([source](https://chieffancypants.github.io/angular-loading-bar/))
- [Network Request Filters](https://awesome-repositories.com/f/web-development/browser-integration-utilities/browser-extension-development/browser-extensions/resource-interception/network-request-filters.md) — Filters outgoing network requests by URL patterns to avoid triggering the loading bar for polling or background syncs. ([source](https://cdn.jsdelivr.net/gh/chieffancypants/angular-loading-bar@master/README.md))

### Security & Cryptography

- [UI Trigger Filters](https://awesome-repositories.com/f/security-cryptography/content-filtering-rules/response-analysis-filters/url-pattern-filters/ui-trigger-filters.md) — Supports URL pattern filtering to exclude polling or background calls from triggering the loading bar.