Анимация загрузки. Прелоадер ajax запроса Битрикс.

В некоторых интернет-магазинах есть операции которые выполняются достаточно долго. И для того, чтобы пользователь не заскучал, ему можно скормить красивую анимацию.

Все стандартные ajax запросы в битриксе сопровождаются лоадером: Стандартный лоадер битрикс

Его и будем менять. Для этого необходимо переопределить js методы: BX.showWait, BX.closeWait

// Готовый пример, показывает/скрывает лоадер, запускает/останавливает анимацию
BX.ready(function(){
	loader = BX('ajax-preloader-wrap');
	BX.showWait = function(node, msg) {
		BX.style(loader, 'display', 'block');
		BX.addClass(loader, 'ajax-preloader--animated');
	};
	BX.closeWait = function(node, obMsg) {
		BX.style(loader, 'display', 'none');
		BX.removeClass(loader, 'ajax-preloader--animated');
	};
});

html, css код лоадера

<div class="ajax-preloader-wrap" id="ajax-preloader-wrap" style="display:none;">
	<div class="ajax-preloader">
		<div class="ajax-preloader-h"></div>
		<div class="ajax-preloader-m"></div>
	</div>
	<div class="ajax-preloader-shadow"></div>
</div>

.ajax-preloader{
	position: fixed;
	z-index: 100;
	
	width: 300px;
	height: 300px;
	top: 50%;
	left: 50%;
	margin-left: -150px;
	margin-top: -150px;
	
	background: url('#');
}
	.ajax-preloader-m{
		position: absolute;
		
		width: 12px;
		height: 148px;
		left: 145px;
		bottom: 120px;
		
		background: url('#'); 
	}
	
	.ajax-preloader--animated .ajax-preloader-m{
		animation: preloaderm 3s linear infinite;
		transform-origin: 100% 0;
		transform-origin: 5px 118px;
	}
	@keyframes preloaderm{
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}
	.ajax-preloader-h{
		position: absolute;
		
		width: 12px;
		height: 115px;
		left: 145px;
		bottom: 120px;
		
		background: url('#'); 
	}
	
	.ajax-preloader--animated .ajax-preloader-h{
		animation: preloaderh 36s steps(12, end) infinite;
		transform-origin: 100% 0;
		transform-origin: 5px 85px;
	}
	@keyframes preloaderh{
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}

.ajax-preloader-shadow{
	position: fixed;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.4);
	top: 0;
	left: 0;
	z-index: 80;
}

Хотя как по мне, лучше избегать долгих операций, чем украшать их лоадерами :)

Есть вопросы или нашли ошибку? Напишите комментарий (можно без регистрации), отвечать стараюсь быстро.