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

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“

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.