How to make a global preloader in Angular 2?

N

Nikolai Kupstas2016-12-20 17:29:12

Angular

Nikolai Kupstas, 2016-12-20 17:29:12

Actually a simple situation. I have a global preloader that needs to be shown while the angular2 framework is loading. It uses gif. But at some point, the GIF freezes for a second and then the application itself appears. I would like to somehow catch this moment and make a beautiful disappearance of the element.
html:

<body>
<app-root>
  <style>
    body {
      background: #002538;
    }

    .gif-preloader {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate3d(-50%, -50%, 0);
      -webkit-transform: translate3d(-50%, -50%, 0);
      -moz-transform: translate3d(-50%, -50%, 0);
      -ms-transform: translate3d(-50%, -50%, 0);
      margin: 0 auto;

      -webkit-transition: opacity .3s ease-in-out;
      -moz-transition: opacity .3s ease-in-out;
      -ms-transition: opacity .3s ease-in-out;
      -o-transition: opacity .3s ease-in-out;
      transition: opacity .3s ease-in-out;

    }

    #preloader.fade {
      opactity: 0;
    }
  </style>
  <img src="/assets/preloader2.gif" width="66px" height="66px" class="gif-preloader" id="preloader">
</app-root>
</body>

Here is what I tried to do:

export class MainModule {
  constructor() {
      document.getElementById("preloader").classList.add("fade");
  }
}

Naturally, this didn't work. But I don't have any idea how to do this...

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

V

Vitaly, 2016-12-20
@vitali1995

Alternatively, make the preloader not in the application tag, but in a separate one. We initially hide the application tag, we hang the DOMNodeInserted handler on it - when the content is inserted, the callback will be executed.

element.addEventListener("DOMNodeInserted", function (ev) {
  // скрываем анимацию
  // показываем приложение
  // удаляем тег прелоадера
}, false);