This is kind of an easy and ready made solution. Download font awesome CSS icon pack from here:

https://fontawesome.com/v4.7.0/get-started

Then include it within the tags of your "index.html":

  <link rel="stylesheet" href="font-awesome.min.css"/>

Create a spinner component that you can resize and reuse everywhere:

spinner.component.ts:

import { Component, Input } from '@angular/core';
@Component
({
    selector    :  'spinner',
    templateUrl :  './spinner.component.html'
})

export class spinnerComponent 
{
    @Input () spinnerSize; 
} 

spinner.component.html:

<div *ngIf = "spinnerSize == 1">
   <i class="fa fa-spinner fa-spin fa-1x"></i>
</div>

<div *ngIf = "spinnerSize == 2">
   <i class="fa fa-spinner fa-spin fa-2x"></i>
</div>

<div *ngIf = "spinnerSize == 3">
   <i class="fa fa-spinner fa-spin fa-3x"></i>
</div>

In any template where you would wish to use the spinner just include the following:

<spinner [spinnerSize] = 1 ></spinner>

This is kind of an easy and ready made solution. Download font awesome CSS icon pack from here:

https://fontawesome.com/v4.7.0/get-started

Then include the 'font-awesome.min.css' file from the css folder within the head tags of your "index.html":

  <link rel="stylesheet" href="font-awesome.min.css"/>

Create a spinner component that you can resize and reuse everywhere:

spinner.component.ts:

import { Component, Input } from '@angular/core';
@Component
({
    selector    :  'spinner',
    templateUrl :  './spinner.component.html'
})

export class spinnerComponent 
{
    @Input () spinnerSize; 
} 

spinner.component.html:

<div *ngIf = "spinnerSize == 1">
   <i class="fa fa-spinner fa-spin fa-1x"></i>
</div>

<div *ngIf = "spinnerSize == 2">
   <i class="fa fa-spinner fa-spin fa-2x"></i>
</div>

<div *ngIf = "spinnerSize == 3">
   <i class="fa fa-spinner fa-spin fa-3x"></i>
</div>

In any template where you would wish to use the spinner just include the following:

<spinner [spinnerSize] = 1 ></spinner>