Imagem carregando por directiva do Angular

Front-end JavaScript
,
#1

Tenho uma directiva no angular 1, que em qualquer requisição (PUT, GET, POST e DELETE), ele coloca uma cor na tela, mais uma imagem carregando, feito por um CSS

Tentei fazer no angular 2, mas não consegui.

No index.html, tem <loading></loading>

"use strict";

var module = angular.module("diretivas");

module.directive('loading', ['$http', function ($http) {
	var html = '<div data-loading id="splash" class="splash-in-backdrop splash"><div class="splash-in-centro"><div class="loader"></div><img class="logo-splash" src="/desif/images/logo-desif.svg"></div></div>';
	return {
      restrict: 'E',
      replace: true,
      template: html,
      link: function (scope, element, attrs) {

        console.log("element: "+element);

        scope.isLoading2 = function () {
          return $http.pendingRequests.length > 0;
        };

        console.log("fn: "+ scope.isLoading2());

        scope.$watch(scope.isLoading2, function (value) {
            console.log(value);
          if (value) {
            element.removeClass('ng-hide');
          } else {
            element.addClass('ng-hide');
          }
        });
      }
    };
}]);
#2

O componente foi criado.

Só não consegui executar

Segue os códigos:

page-loader.component.css

.loader-outter {
  width: 128px;
  height: 128px;
  background: #2b3e50;
  background: url('./carregando.png') center center no-repeat;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  /*this to solve "the content will not be cut when the window is smaller than the content": */
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
}

.loader-spinner {
  width: 128px;
  height: 128px;
}

.loader-outter, .loader-spinner {
  border-radius: 50%;
}

.loader-outter > .loader-spinner {
  border: 8px solid #4e5d6c; /* Light grey */
  border-top: 8px solid #5cb85c; /* green */
  animation: spin .8s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

page-loader.component.html

<div class="loader-outter">
  <div class="loader-spinner"></div>
</div>

page-loader.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'gro-page-loader',
  templateUrl: './page-loader.component.html',
  styleUrls: ['./page-loader.component.css']
})
export class PageLoaderComponent implements OnInit {

  constructor(
    
  ) { }

  ngOnInit() {
  }

}

page-loading.ts

export class PageLoading {

  protected isLoading: boolean;

  constructor(isLoading:boolean) {
    this.isLoading = isLoading;
  }

  protected standby() {
    this.isLoading = true;
  }

  protected ready() {
    this.isLoading = false;
  }
}