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>
- 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.
-
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 { }
chevron_rightfilter_none -
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
>
chevron_rightfilter_none -
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); }
}
chevron_rightfilter_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(
.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_rightfilter_none
You can make a spinner your way.
Code Implementation
Output:
Run the development server to see the output

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