Home Angular 7.2.4 Angular Latest Versions Loader Working Example

Angular Latest Versions Loader Working Example

by therichpost
Published: Last Updated on 1 comment

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular Latest Versions Loader Working Example.

I am doing this in Angular7.2.4 version. This is very interesting post because I liked it very much.

In this post, loader will show according to content load and this is the awesome thing.

I am calling Angular loader before API data will load successfully and I am getting API data with Angular HTTP Client.

Here is the working code, you need to follow carefully:

1. Here is the code, you need to add into app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

// we need this because we are calling API to get records
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';

  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }


2. You need to add below code into your app.component.ts file:

import { Component } from '@angular/core';
// HttpClient will call the API and get data
import { HttpClient } from '@angular/common/http';
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  title  = 'angularloader'; //Initiate loader
  loader = true;
  post   : any;
  constructor(private http: HttpClient) {
  this.http.get('https://project/posts').subscribe(data => {
  this.post = data;
  this.loader = false;
    }, error => console.error(error));


3. You need to add below code into app.component.html file:

<!DOCTYPE html>
<html lang="en">
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="loader" *ngIf="loader">
  <div class="bar"></div>

<div class="jumbotron text-center">
  <h1> Welcome to {{ title }}!</h1>
  <p>Resize this responsive page to see the effect!</p> 
<div class="container">
  <div class="row">
     <!-- Get The API Data -->
      <li *ngFor="let Posts of post">
        <span>{{ Posts.id }}</span>
        <h2>{{ Posts.title }}</h2>
        <p>{{ Posts.body }}</p>



4. You need to add the below code into app.component.css file to styling loader:

@keyframes loader-animation {
     0% {
         left: -100%;
     49% {
         left: 100%;
     50% {
         left: 100%;
     100% {
         left: -100%;
 .loader {
     height: 5px;
     width: 100%;
     overflow: hidden;
 .loader .bar {
     position: relative;
     height: 5px;
     width: 100%;
     background-color: dodgerblue;
     animation-name: loader-animation;
     animation-duration: 3s;
     animation-iteration-count: infinite;
     animation-timing-function: ease-in-out;


This is it, if you have any query regarding this post, then please let me know.

Jassa Jatt

Thank you

You may also like

1 comment

jasmeen April 18, 2019 - 4:13 am

Useful post.


Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.