Angular 14 ngx-spinner Example to Show Loading Progressbar or Spinner Animation on Page Load in TS

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

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 { }

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

<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>

user-list works!

<ngx-spinner

bdColor="rgba(51,51,51,0.8)"

size="medium"

color="#fff"

type="ball-scale-multiple"

Loading...

</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

{
  "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
  ]
}

{

"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 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

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);
  }
}

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