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

Last Updated : 03 Jun, 2020

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
```

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 Implementation

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.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.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“

My Personal Notes

Related Articles