Angular page loading Progress bar
In Angular, we have a lot of page loaders that may be confusing to integrate with your Angular project but if you looking for a beautiful page loading progress bar? that means you are in the right place. Creating a standardized loading progress bar is best for the website to look as well as the quality. So in this article, we going to see the Angular page loading progress bar with simple steps integration.
Here now I show you a library that helps us to integrate a page loading progress bar on all the http, http-client and router on our Angular project. I assure you that this page loading progress bar will visually attract the users.
Get started with Angular App
Before starting with the page loader you need to install an Angular app, The best way to create your Angular project using Command Line Interface (CLI), for that here you have an article for installing an Angular app.
Angular page loading Progress bar installation
Once you completed the Angular app installation, now it is time to import the library called @ngx-loading-bar with the below three installations you going to use the page progress loader.
|
1 2 3 4 5 6 7 8 |
# if you use `@angular/common/http` npm install @ngx-loading-bar/core @ngx-loading-bar/http-client --save # if you use `@angular/router` npm install @ngx-loading-bar/core @ngx-loading-bar/router --save # to manage loading-bar manually npm install @ngx-loading-bar/core --save |
After that import the installed libraries in your app.module.ts like below the code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; // for HttpClient import: import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http-client'; // for Router import: import { LoadingBarRouterModule } from '@ngx-loading-bar/router'; // for Core import: import { LoadingBarModule } from '@ngx-loading-bar/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, // for HttpClient use: LoadingBarHttpClientModule, // for Router use: LoadingBarRouterModule, // for Core use: LoadingBarModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
Now include the ngx-loading-bar in your app.component.html or where ever you want. Use the below code to get the page loading progress bar.
|
1 |
<ngx-loading-bar></ngx-loading-bar> |
If you looking for color difference or height increasing as below you can adjust the loading progress bar.
|
1 |
<ngx-loading-bar color="#ff0000" height="3px"></ngx-loading-bar> |
Output:
Still, you looking for more information you can get it from here @ngx-loading-bar
Conclusion:
I hope this will helped you visually the best page loading progress bar. If you like this article share it with your friends.
