Add the loading directive to any HTML element to make it appear whenever there is at least one pending XHR request. You can place elements wherever you like and style them with CSS animations to bring them to life. This is a simple, automatated way to give the user loading/saving feedback.
File Size: 2.1K minified; 0.8K gzipped
- Install via npm
$ npm install angular-loading-directive
- Add zt.angular-loading as a dependency of your app
Add the loading directive to any element that you would like to act as a loading bar, wheel, modal, etc.
Adjust the latency threshold
By default, any element with the loading directive will be shown for the duration of the time there is at least one XHR request pending. If you would like to customize this and only display the loading bar for slower responses use the LoadingProvider to set this threshold.
Hide on certain request types
By default, the loading directive is visible when there is a pending XHR request of any type. You can configre the loading bar to only be visible while certian types of requests are pending. Perhaps you want to give the user feedback about loading but not saving so the app feels more fluid and automatic. Then restrict the request types tracked to only GET requests.
Ignoring individual XHR requests
When your app is polling it can be very annoying to the user to keep showing the loading bar for what are supposed to be transparent updates. To ignore individual requests pass the hideLoading attribute to the
$http request configuration.
If you would like to manually show and hide your loading elements then you can use the service API.