chieffancypants/angular-loading-bar is a open-source project on GitHub, written primarily in JavaScript. It has 5.1k stars. A fully automatic loading / progress bar for your angular apps.
Snapshot summary built from the project's own GitHub metadata — there's no written TopGit review yet. The page will update automatically when a full review is published.
WHY NO REVIEW YET
TopGit writes full reviews for the most-starred, most-requested repositories. This page is a snapshot until then — see the READ ME tab for the original README in full.
The idea is simple: Add a loading bar / progress bar whenever an XHR request goes out in angular. Multiple requests within the same time period get bundled together such that each response increments the progress bar by the appropriate amount.
This is mostly cool because you simply include it in your app, and it works. There's no complicated setup, and no need to maintain the state of the loading bar; it's all handled automatically by the interceptor.
Requirements: AngularJS 1.2+
File Size: 2.4Kb minified, 0.5Kb gzipped
Usage:
include the loading bar as a dependency for your app. If you want animations, include ngAnimate as well. note: ngAnimate is optional
There are a couple projects similar to this out there, but none were ideal for me. All implementations I've seen require that you maintain state on behalf of the loading bar. In other words, you're setting the value of the loading/progress bar manually from potentially many different locations. This becomes complicated when you have a very large application with several services all making independent XHR requests. It becomes even more complicated if you want these services to be loosly coupled.
Additionally, Angular was created as a highly testable framework, so it pains me to see Angular modules without tests. That is not the case here as this loading bar ships with 100% code coverage.
Goals for this project:
Make it automatic
Unit tests, 100% coverage
Must work well with ngAnimate
Must be styled via external CSS (not inline)
No jQuery dependencies
Configuration
Turn the spinner on or off:
The insertion of the spinner can be controlled through configuration. It's on by default, but if you'd like to turn it off, simply configure the service:
If you'd like to position the loadingBar or spinner, provide a CSS selector to the element you'd like the template injected into. The default is the <body> element:
Also keep in mind you'll likely want to change the CSS to reflect it's new position, so you'll need to override the default CSS:
#loading-bar .bar {
position: relative;
}
Latency Threshold
By default, the loading bar will only display after it has been waiting for a response for over 100ms. This helps keep things feeling snappy, and avoids the annoyingness of showing a loading bar every few seconds on really chatty applications. This threshold is totally configurable:
The loading bar can also be forced to ignore certain requests, for example, when long-polling or periodically sending debugging information back to the server.
// ignore a particular $http GET:
$http.get('/status', {
ignoreLoadingBar: true
});
// ignore a particular $http POST. Note: POST and GET have different
// method signatures:
$http.post('/save', data, {
ignoreLoadingBar: true
});
This library is split into two modules, an $http interceptor, and a service:
Interceptor
The interceptor simply listens for all outgoing XHR requests, and then instructs the loadingBar service to start, stop, and increment accordingly. There is no public API for the interceptor. It can be used stand-alone by including cfp.loadingBarInterceptor as a dependency for your module.
Service
The service is responsible for the presentation of the loading bar. It injects the loading bar into the DOM, adjusts the width whenever set() is called, and complete()s the whole show by removing the loading bar from the DOM.
Service API (advanced usage)
Under normal circumstances you won't need to use this. However, if you wish to use the loading bar without the interceptor, you can do that as well. Simply include the loading bar service as a dependency instead of the main angular-loading-bar module:
angular.module('myApp', ['cfp.loadingBar'])
cfpLoadingBar.start();
// will insert the loading bar into the DOM, and display its progress at 1%.
// It will automatically call `inc()` repeatedly to give the illusion that the page load is progressing.
cfpLoadingBar.inc();
// increments the loading bar by a random amount.
// It is important to note that the auto incrementing will begin to slow down as
// the progress increases. This is to prevent the loading bar from appearing
// completed (or almost complete) before the XHR request has responded.
cfpLoadingBar.set(0.3) // Set the loading bar to 30%
cfpLoadingBar.status() // Returns the loading bar's progress.
// -> 0.3
cfpLoadingBar.complete()
// Set the loading bar's progress to 100%, and then remove it from the DOM.
Events
The loading bar broadcasts the following events over $rootScope allowing further customization:
cfpLoadingBar:loading triggered upon each XHR request that is not already cached
cfpLoadingBar:loaded triggered each time an XHR request recieves a response (either successful or error)
cfpLoadingBar:started triggered once upon the first XHR request. Will trigger again if another request goes out after cfpLoadingBar:completed has triggered.
cfpLoadingBar:completed triggered once when the all XHR requests have returned (either successfully or not)
Credits:
Credit goes to rstacruz for his excellent nProgress.
How active is development on chieffancypants/angular-loading-bar?
The most recent commit recorded on chieffancypants/angular-loading-bar was 3.0 years ago, based on the GitHub push timestamp. The repository has 662 forks — one of the better signals of community interest.
How many stars does chieffancypants/angular-loading-bar have?
chieffancypants/angular-loading-bar has 5.1k GitHub stars — refresh the page for the live number, or check github.com/chieffancypants/angular-loading-bar. TopGit mirrors GitHub's count but does not claim minute-by-minute accuracy.
Is chieffancypants/angular-loading-bar open source?
Yes — chieffancypants/angular-loading-bar ships under the MIT license, which makes its source code freely readable (and, depending on license terms, forkable and reusable). Source: github.com/chieffancypants/angular-loading-bar.
What is chieffancypants/angular-loading-bar?
chieffancypants/angular-loading-bar (chieffancypants/angular-loading-bar) is a JavaScript project on GitHub. From the project's own README: A fully automatic loading / progress bar for your angular apps.
Where do I read more about chieffancypants/angular-loading-bar?
This TopGit page is a snapshot — the READ ME tab shows the project's own README content (links stripped, images preserved). The GitHub repository at github.com/chieffancypants/angular-loading-bar is the definitive source.
Read full README in the tab above.
Want a second opinion on angular-loading-bar?
Ask an AI that can read this page — one click and you get its take on angular-loading-bar.
/angular-loading-bar