Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Sitemap
Menu

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

Posted on November 5, 2022

 

 

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

 

 

TypeScript
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

 

 

TypeScript
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

 

 

TypeScript
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

 

 

 

 

Recent Posts

  • Build a Fixed Deposit Interest Calculator Using Amount and Time in Browser Using HTML5 & Javascript
  • How to Download Files From URL in Node.js Using Node-Downloader-Helper Library
  • Angular 10 Image Carousel and Video Gallery Lightbox Modal Slider Using ng-image-slider Library
  • React Unsplash Api Photo Search App
  • React Form Validation Using Formik and Yup
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • javascript
  • Koajs
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme