@ngx-loading-bar
A fully automatic loading bar with zero configuration for Angular app (http, http-client and router).
Packages
- @ngx-loading-bar/router - Display loading bar when navigating between routes.
- @ngx-loading-bar/http-client - Display the progress of your
@angular/common/http
requests. - @ngx-loading-bar/http - Display the progress of your
@angular/http
requests. - @ngx-loading-bar/core - Core module to manage the progress bar manually.
Demo
- online demo: https://angular-sypacw.stackblitz.io
- demo-app: Example utilizing all @ngx-loading-bar libraries.
Table of contents
- Getting started
- Ignoring particular requests
- Manually manage loading service
- Integration with Material Progress bar
- Credits
Getting started
1. Install @ngx-loading-bar:
# if you use `@angular/common/http` npm install @ngx-loading-bar/http-client --save # if you use `@angular/http` npm install @ngx-loading-bar/http --save # if you use `@angular/router` npm install @ngx-loading-bar/router --save # to manage loading-bar manually npm install @ngx-loading-bar/core --save
2. Import the installed libraries:
;; ; // for Http import LoadingBarHttpModule:// import { LoadingBarHttpModule } from '@ngx-loading-bar/http'; // for Router import LoadingBarRouterModule:// import { LoadingBarRouterModule } from '@ngx-loading-bar/router'; // for Core import LoadingBarModule:// import { LoadingBarModule } from '@ngx-loading-bar/core'; ;
ngx-loading-bar
in your app component:
3. Include ;
ngx-loading-bar
Customize You can pass the following inputs to customize the view:
Input | Description |
---|---|
color | The color of loading bar. Default value is #29d . |
includeSpinner | Hide or show the Spinner. Default value is true . |
includeBar | Hide or show the Bar. Default value is true . |
height | The height of loading bar. Default value is 2px . |
diameter | The diameter of the progress spinner. Default value is 14px . |
Ignoring particular requests
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.
http-client:
Http client doesn't allow passing custom option, in order to achieve that we made a temporary solution (by passing the option throught the header) that will be removed once http-client come with a proper solution.
// ignore a particular $http GET:httpClient.get'/status', ;
http:
// ignore a particular $http GET:http.get'/status', };
Manually manage loading service
LoadingBarModule
1. Import the ; ;
2. Inject/Use LoadingBarService
;;
Material Progress bar
Integration with;;