Illorian
@Illorian
Front-end разработчик

Как сделать глобальный прелоадер у Angular 2?

Собственно простая ситуация. У меня есть глобальный прелоадер, который должен показываться, пока загружается инфраструктуру angular2. Там используется gif. Но в какой-то момент гифка подвисает на секунду и после появляется само приложение. Хотелось бы как-то отловить этот момент и сделать красивое исчезновение элемента.

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>


Вот, что я попробовал сделать:
export class MainModule {
	constructor() {
	    document.getElementById("preloader").classList.add("fade");
	}
}


Естественно это не заработало. Но так у меня уже нет идей, как такое можно сделать....
  • Вопрос задан
  • 719 просмотров
Пригласить эксперта
Ответы на вопрос 2
vitali1995
@vitali1995
Как вариант, делать прелоадер не в теге приложения, а в отдельном. Тег приложения изначально скрываем, на него вешаем обработчик DOMNodeInserted - когда содержимое будет вставлено, выполнится колбэк.

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


Статья по теме
Ждём ещё идеи.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы