Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
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

  • Android Java Project to Export Raw Text to PDF Document Using iTextPDF Library
  • Android Java Project to Export Images From Gallery to PDF Document Using iTextPDF Library
  • Android Java Project to Capture Image From Camera & Save it in SharedPreferences & Display it in Grid Gallery
  • Android Java Project to Store,Read & Delete Data Using SharedPreferences Example
  • Android Java Project to Download Multiple Images From URL With Progressbar & Save it inside Gallery
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme