Welcome folks today in this blog post we will be showing different progressbar loading or spinner animations when you load the page in angular 14 using the ngx-spinner
library using typescript. All the full source code of the application is shown below.
Get Started
In order to get started you need to initialize a new angular
project using the below command
ng new sampleapp
cd sampleapp
npm i ngx-spinner
After you install this library you need to include the ngx-spinner
module inside the app.module.ts
file as shown below
app.module.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import { NgxSpinnerModule } from "ngx-spinner"; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, NgxSpinnerModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
After that we need to write the required html code for this angular application. This will actually contain the ngx-spinner
directive where we will be showing the loading spinner progressbar animation and we will providing some options to it.
app.component.html
1 2 3 4 5 6 7 8 9 10 11 12 |
<p> user-list works! </p> <ngx-spinner bdColor="rgba(51,51,51,0.8)" size="medium" color="#fff" type="ball-scale-multiple" > <p style="font-size: 20px; color: white">Loading...</p> </ngx-spinner> |
As you can see we have provided the background color of the loading spinner. This color is in rgba format. And then we are providing the size of the spinner it is given medium value. And then we have the text color of the spinner which is also in hexadecimal code. And lastly we have the type parameter which is set to ball-scale-multiple. It can have various types of loading spinners available.
And for this ball-scale-multiple
spinner we also need to add the below line inside the angular.json
file of your project
1 2 3 4 5 6 |
{ "styles": [ "node_modules/ngx-spinner/animations/ball-scale-multiple.css" // ===> Add css file based on your animation name(here it's "ball-scale-multiple") // You're able to add multiple files if you need ] } |
This is the required css classes
which are required for this loading spinner animation.
And after that guys you can see we have the loading spinner progressbar label which is loading
animation inside the <p> tag.
Show the Spinner
Now we need to show the spinner when you load the angular
app for this you need to go to app.component.ts
file and copy paste the below code
app.compnent.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
import { Component } from '@angular/core'; import { NgxSpinnerService } from 'ngx-spinner'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { constructor(private spinner: NgxSpinnerService) { } ngOnInit() { this.spinner.show(); setTimeout(() => { this.spinner.hide(); }, 2000); } } |
As you can see we are importing the ngxSpinnerService
from the ngx-spinner
module and then inside the ngOnInit()
we are basically showing the spinner using the show()
method and then we are using the setTimeout()
method to hide the spinner after 2 seconds
are passed.
Now if you run the angular app by executing the below command then the loading animation will show something like this
ng serve