A loading/progress indicator provides an easy way to show the current loading status while data in a specific area or the whole document is loading.
This is a curated list of 7 best components and JavaScript libraries for Angular.js applications to create awesome loading & progress indicators during HTTP requests, routing change, or all you want. Enjoy.
1. Native Angular Datetime Picker With Bootstrap 4
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.
2. Angular Directive For Busy/Loading Indicators – angular-busy
angular-busy is an AngularJS directive used to show busy/loading indicators on any $http or $resource request, or on any promise.
3. Nanoscopic Progress Bar For Angular
A nanoscopic progress bar. Featuring realistic trickle animations to convince your users that something is happening!
4. Angular SVG Round Progressbar
AngularJS module that uses SVG to create a circular progressbar.
5. Automatic Page Loading Progress Bar For Angular
A fully automatic loading bar with zero configuration for Angular 2+ app (http, http-client and router).
6. ng-http-loader
Smart angular HTTP interceptor – Intercepts automagically HTTP requests and shows a spinkit spinner / loader / progress bar.
7. ngx-spinner
A library with more than 50 different loading spinners for Angular 4/5/6/7/8/9.
More Resources:
You might not need an Angular component or UI library to create loading & progress indicates on your app. Here are a few resources which you can achieve it via Vanilla JavaScript or Pure CSS: