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

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

.loadWrapper {  
    background: rgba(0, 0, 0, 0.3);  
    width: 100 % ;  
    height: 100 % ;  
    position: fixed;  
    top: 0 px;  
    left: 0 px;  
    z - index: 99999;  
}.loader {  
    border: 5 px solid #f3f3f3; /* Light grey */ 
    border - top: 5 px solid #3d3e3f; /* gray */ 
   position: absolute;  
   left: 50%;  
   top: 50%;  
   border-radius: 50%;  
   width: 50px;  
   height: 50px;  
   animation: spin 2s linear infinite;  
}  
@keyframes spin {  
   0% { transform: rotate(0deg); }  
   100% { transform: rotate(360deg); }  
}  

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 to Open the Modal -->  
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">  
Open modal  
</button>  
<!-- The Modal -->  
<div class="modal" id="myModal">  
    <div class="modal-dialog">  
        <div class="modal-content">  
            <!-- Modal Header -->  
            <div class="modal-header">  
                <h4 class="modal-title">popuploader</h4>  
                <button type="button" class="close" data-dismiss="modal">×</button>  
            </div>  
            <!-- Modal body -->  
            <div class="modal-body">  
                <div *ngIf="loading else loaded" class="loader"></div>  
                <!-- Modal footer -->  
                <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.

Source: Paper.li - By Murali Krishnan

The Tech Platform

www.thetechplatform.com