Angular 11 Spinner/Loader With Out Any Third Party Library/Package

Introduction

In this article, we will learn how we can show the Loader in Angular 11 without using any third-party spinner. We are using CSS to build an animated Spinner.

Prerequisites

Basic Knowledge of Angular 2 or higher
Visual Studio Code
Node and NPM installed
Bootstrap

Step 1

Create an Angular project by using the following command

ng new Angularloader

Step 2

Open this project in Visual Studio Code and install bootstrap by using the following command

npm install bootstrap --save

Step 3

Jquery is needed to run bootstrap click events. So install jquery using below command

npm install jquery --save

Declare Jquery before bootstrap.

Otherwise, you will get the below error

Uncaught TypeError: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript.

"scripts": [
"node_modules/jquery/dist/jquery.js",
"node_modules/bootstrap/dist/js/bootstrap.js"]

Now Bootstrap will work fine.

Step 4

Let's start the main goal of the articlet to show spinner.
Create one new component using Ng g c popuploader
In popuploader.component.css file paste below lines of code to create animated spinner
1. .loadWrapper {
2. background: rgba(0, 0, 0, 0.3);
3. width: 100 % ;
4. height: 100 % ;
5. position: fixed;
6. top: 0 px;
7. left: 0 px;
8. z - index: 99999;
9. }.loader {
10. border: 5 px solid #f3f3f3; /* Light grey */
11. border - top: 5 px solid #3d3e3f; /* gray */
12. position: absolute;
13. left: 50%;
14. top: 50%;
15. border-radius: 50%;
16. width: 50px;
17. height: 50px;
18. animation: spin 2s linear infinite;
19. }
20. @keyframes spin {
21. 0% { transform: rotate(0deg); }
22. 100% { transform: rotate(360deg); }
23. }

Step 5

We will create one simple data service which will load data into table..For that I have created student.service.ts file

In StudentService write the below line of code.

import {
Injectable
} from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class StudentService {
students = [{
"id": 1001,
"name": "Irshad",
"marks": 90
}, {
"id": 1002,
"name": "Imran",
"marks": 80
}, {
"id": 1003,
"name": "Rahul",
"marks": 70
}, {
"id": 1004,
"name": "Ajay",
"marks": 85
}, {
"id": 1005,
"name": "Sunny",
"marks": 60
}];
constructor() {}
getStudents() {
return this.students;
}
}

Step 6

Lets call this service in our popuploader component

import {
Component,
OnInit
} from '@angular/core';
import {
StudentService
} from '../student.service';
@Component({
selector: 'app-popuploader',
templateUrl: './popuploader.component.html',
styleUrls: ['./popuploader.component.css']
})
export class PopuploaderComponent implements OnInit {
public loading = true;
public studentList: any[];
constructor(private stnService: StudentService) {}
ngOnInit() {
this.loading = true;
setTimeout(() => {
/** spinner ends after 5 seconds */
this.studentList = this.stnService.getStudents();
this.loading = false;
}, 5000);
}
}

Step 7

You can seen I have created one variable loading this will decide whether loading spinner should show or not.

Before loading the data into variable I set as true .then the spinner will show.

Then I given some time to show the spinner.
After that I set to False to hide the spinner. As I mentioned no need of timer when API. Call.
Once API call over set it as false.

Step 6

Let's create a Model dialog with the help of Bootstrap and call the data & spinner.

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">popuploader</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div *ngIf="loading else loaded" class="loader"></div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<ng-template #loaded>
<p>student works!</p>
<table class="table">
<thead>
<td>
ID
</td>
<td>
Name
</td>
<td>
Marks
</td>
</thead>
<tbody>
<tr *ngFor="let std of studentList">
<td>{{std.id}}</td>
<td>{{std.name}}</td>
<td>{{std.marks}}</td>
</tr>
</tbody>
</table>
</ng-template>

In about code, we have created one button. That button will trigger the popup.

We should call the popup using the data-target attribute data-target="#myModal".

Mymodel is the id of model dialog.

In our process, I will load the spinner with the timer. In real-life cases, no timer is needed.

I have created ng template and I have loaded the data there.

<ng-template #loaded>
…..
</ng-template>

I gave the name of the template as loaded.

To show the templete I have set condition as,

<div *ngIf="loading else loaded" class="loader">
</div>

SO if loading variable is true then the loaded template will show with loader css.

If false then loader CSS will disappear

Now type ng serve to ( use angular CLI ) run the project.