Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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

    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.



    Last Updated : 07 Mar, 2024
    Like Article
    Save Article
    Previous
    Next
    Share your thoughts in the comments
Similar Reads