How to Display Spinner on the Screen till the data from the API loads using Angular 8 ? - GeeksforGeeks

05 May, 2022
The task is to display a spinner on the page until the response from the API comes. Here we will be making a simple CSS spinner which will load till the data from API comes. You can also take bootstrap spinners or can make spinner on your own.
Prerequisite: You will need some knowledge for making Http get() requests from API and getting data.
Here you will need an API for getting data. A fake API can also be created and data can be used to display. We already have a fake API that contain the following data:
Approach:
Required Angular App and Component is created.ng new app_name
ng g c component_name
ng new app_name
ng g c component_name
In component.html file, make an object with id loading.Here spinner is defined as:<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status" >
    <span class="sr-only" id="loading"></span>
  </div>
</div>
You can make a spinner your way.In component.css file, give spinner the styles you want.Here spinner is styled as:#loading{
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
Fetch the data from API by making get request.After fetching the data from API store it in a Response variable.There is an if statement that checks if Response from API came or not.If Response came then there is a function hideloader() which is called.In that hideloader() function by using DOM manipulation, we set display of loading element to none.document.getElementById('loading').style.display = 'none';For further clarity of getting data, I had shown the fetched data to HTML using interpolation data binding.Code Implementationapp.module.tsimport { BrowserModule } from     '@angular/platform-browser';  import { NgModule } from     '@angular/core';  import { HttpClientModule } from     '@angular/common/http';  import { FormsModule } from     '@angular/forms';  import { AppRoutingModule } from     './app-routing.module';  import { AppComponent } from     './app.component';  import { ShowApiComponent } from     './show-api/show-api.component';  @NgModule({    declarations: [        AppComponent,        ShowApiComponent,    ],    imports: [        BrowserModule,        AppRoutingModule,        HttpClientModule,        FormsModule    ],    providers: [],    bootstrap: [AppComponent]})export class AppModule { }show-api.component.html<h1>GeeksforGeeks</h1>  <!-- spinnner element is     defined with id loading --><div class="d-flex justify-content-center">    <div class="spinner-border" role="status">        <span class="sr-only" id="loading"></span>    </div></div>  <!-- data from API is displayed  --><h2>{{ dataDisplay }}</h2>show-api.component.css#loading{  position: absolute;  left: 50%;  top: 50%;  z-index: 1;  width: 150px;  height: 150px;  margin: -75px 0 0 -75px;  border: 16px solid #f3f3f3;  border-radius: 50%;  border-top: 16px solid #3498db;  width: 120px;  height: 120px;  animation: spin 2s linear infinite;  }      @keyframes spin {    0% { transform: rotate(0deg); }    100% { transform: rotate(360deg); }  }show-api.component.tsimport { Component, OnInit } from '@angular/core';import { HttpClient } from '@angular/common/http';@Component({    selector: 'app-show-api',    templateUrl: './show-api.component.html',    styleUrls: ['./show-api.component.css']})export class ShowApiComponent implements OnInit {    dt: any;    dataDisplay: any;    constructor(private http: HttpClient) {    }      ngOnInit(): void {        this.http.get('http://www.mocky.io/v2/5ec6a61b3200005e00d75058')            .subscribe(Response => {                                  // If Response comes function                // hideloader() is called                if (Response) {                    hideloader();                }                console.log(Response)                this.dt = Response;                this.dataDisplay = this.dt.data;            });        // Function is defined        function hideloader() {              // Setting display of spinner            // element to none            document.getElementById('loading')                .style.display = 'none';        }    }}Output:Run the development server to see the outputAPI link:”http://www.mocky.io/v2/5ec6a61b3200005e00d75058“CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.My Personal Notes
arrow_drop_upSave
Here spinner is defined as:
<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status" >
    <span class="sr-only" id="loading"></span>
  </div>
</div>

You can make a spinner your way.
In component.css file, give spinner the styles you want.Here spinner is styled as:#loading{
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

Here spinner is styled as:
#loading{
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

Fetch the data from API by making get request.
After fetching the data from API store it in a Response variable.
There is an if statement that checks if Response from API came or not.
If Response came then there is a function hideloader() which is called.
In that hideloader() function by using DOM manipulation, we set display of loading element to none.document.getElementById('loading').style.display = 'none';
document.getElementById('loading').style.display = 'none';
For further clarity of getting data, I had shown the fetched data to HTML using interpolation data binding.
Code Implementation
app.module.tsimport { BrowserModule } from     '@angular/platform-browser';  import { NgModule } from     '@angular/core';  import { HttpClientModule } from     '@angular/common/http';  import { FormsModule } from     '@angular/forms';  import { AppRoutingModule } from     './app-routing.module';  import { AppComponent } from     './app.component';  import { ShowApiComponent } from     './show-api/show-api.component';  @NgModule({    declarations: [        AppComponent,        ShowApiComponent,    ],    imports: [        BrowserModule,        AppRoutingModule,        HttpClientModule,        FormsModule    ],    providers: [],    bootstrap: [AppComponent]})export class AppModule { }
app.module.ts
import { BrowserModule } from     '@angular/platform-browser';  import { NgModule } from     '@angular/core';  import { HttpClientModule } from     '@angular/common/http';  import { FormsModule } from     '@angular/forms';  import { AppRoutingModule } from     './app-routing.module';  import { AppComponent } from     './app.component';  import { ShowApiComponent } from     './show-api/show-api.component';  @NgModule({    declarations: [        AppComponent,        ShowApiComponent,    ],    imports: [        BrowserModule,        AppRoutingModule,        HttpClientModule,        FormsModule    ],    providers: [],    bootstrap: [AppComponent]})export class AppModule { }
show-api.component.html<h1>GeeksforGeeks</h1>  <!-- spinnner element is     defined with id loading --><div class="d-flex justify-content-center">    <div class="spinner-border" role="status">        <span class="sr-only" id="loading"></span>    </div></div>  <!-- data from API is displayed  --><h2>{{ dataDisplay }}</h2>
show-api.component.html
<h1>GeeksforGeeks</h1>  <!-- spinnner element is     defined with id loading --><div class="d-flex justify-content-center">    <div class="spinner-border" role="status">        <span class="sr-only" id="loading"></span>    </div></div>  <!-- data from API is displayed  --><h2>{{ dataDisplay }}</h2>
show-api.component.css#loading{  position: absolute;  left: 50%;  top: 50%;  z-index: 1;  width: 150px;  height: 150px;  margin: -75px 0 0 -75px;  border: 16px solid #f3f3f3;  border-radius: 50%;  border-top: 16px solid #3498db;  width: 120px;  height: 120px;  animation: spin 2s linear infinite;  }      @keyframes spin {    0% { transform: rotate(0deg); }    100% { transform: rotate(360deg); }  }
show-api.component.css
#loading{  position: absolute;  left: 50%;  top: 50%;  z-index: 1;  width: 150px;  height: 150px;  margin: -75px 0 0 -75px;  border: 16px solid #f3f3f3;  border-radius: 50%;  border-top: 16px solid #3498db;  width: 120px;  height: 120px;  animation: spin 2s linear infinite;  }      @keyframes spin {    0% { transform: rotate(0deg); }    100% { transform: rotate(360deg); }  }
show-api.component.tsimport { Component, OnInit } from '@angular/core';import { HttpClient } from '@angular/common/http';@Component({    selector: 'app-show-api',    templateUrl: './show-api.component.html',    styleUrls: ['./show-api.component.css']})export class ShowApiComponent implements OnInit {    dt: any;    dataDisplay: any;    constructor(private http: HttpClient) {    }      ngOnInit(): void {        this.http.get('http://www.mocky.io/v2/5ec6a61b3200005e00d75058')            .subscribe(Response => {                                  // If Response comes function                // hideloader() is called                if (Response) {                    hideloader();                }                console.log(Response)                this.dt = Response;                this.dataDisplay = this.dt.data;            });        // Function is defined        function hideloader() {              // Setting display of spinner            // element to none            document.getElementById('loading')                .style.display = 'none';        }    }}
show-api.component.ts
import { Component, OnInit } from '@angular/core';import { HttpClient } from '@angular/common/http';@Component({    selector: 'app-show-api',    templateUrl: './show-api.component.html',    styleUrls: ['./show-api.component.css']})export class ShowApiComponent implements OnInit {    dt: any;    dataDisplay: any;    constructor(private http: HttpClient) {    }      ngOnInit(): void {        this.http.get('http://www.mocky.io/v2/5ec6a61b3200005e00d75058')            .subscribe(Response => {                                  // If Response comes function                // hideloader() is called                if (Response) {                    hideloader();                }                console.log(Response)                this.dt = Response;                this.dataDisplay = this.dt.data;            });        // Function is defined        function hideloader() {              // Setting display of spinner            // element to none            document.getElementById('loading')                .style.display = 'none';        }    }}
Output:
Run the development server to see the output
API link:”http://www.mocky.io/v2/5ec6a61b3200005e00d75058“
CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.
AngularJS-Misc
AngularJS
CSS
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Angular PrimeNG Dropdown Component
Auth Guards in Angular 9/10/11
Angular PrimeNG Calendar Component
What is AOT and JIT Compiler in Angular ?
Angular 10 (blur) Event
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to create footer to stay at the bottom of a Web page?
How to apply style to parent if it has child with CSS?