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

      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      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 { }

      chevron_right

      
      

    • show-api.component.html

      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

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

      chevron_right

      
      

    • show-api.component.css

      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      #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); }
        }

      chevron_right

      
      

    • show-api.component.ts

      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      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(
                  .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';
              }
          }
      }

      chevron_right

      
      

    Output:

    Run the development server to see the output

    API link:”http://www.mocky.io/v2/5ec6a61b3200005e00d75058




    My Personal Notes arrow_drop_up

    Check out this Author's contributed articles.

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.