Для тех, кто активно использует Ajax, при разработки своих приложений, не редко встает вопрос стилизации прелоадера выполнения Ajax. Прелоадер – это некий элемент, который, как правило, визуально сообщает пользователю о выполнении ajax команды. По умолчанию в Drupal – прелоадер выглядит так:
Но, как правило, данный элемент почти всегда стилизуется. Самый простой способ стилизации – это CSS. За стиль данного элемента отвечают следующие классы CSS:
- .ajax-progress
- .ajax-progress-throbber
- .ajax-progress-throbber .message
- .ajax-progress-throbber .throbber
Путем не хитрого CSS – мы может добиться отображение прелоадера с затемнением экрана и отображением кастомного визуального элемента.
CSS:
.ajax-progress .message, .ajax-progress-throbber .message{ color: white; font-size: 20px; padding: 30px; } .ajax-progress .throbber, .ajax-progress-throbber .throbber { float: none; margin: 400px auto 0 auto; width: 64px; height: 64px; background: url("../images/preloader.gif") no-repeat center center; } .ajax-progress, .ajax-progress-throbber { width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.7); position: fixed; top: 0; left: 0; z-index: 4444; vertical-align: middle; text-align: center; }
Не забудьте только переписать путь до вашего изображения прелоадера. Для выполнения анимации на CSS3 вам в любом случае не обойтись без JS. Например, в качестве анимации будем использовать масштабирование (scale).
То, CSS примет следующий вид:
.overlay-ajax{ position:fixed; z-index:4444; width:100%; height:100%; top:0; left:0; background:#fff; background:rgba(255, 255, 255, 0.9); opacity:0; visibility:hidden; transform:scale(0.5); -webkit-transform:scale(0.5); -ms-transform:scale(0.5); -o-transform:scale(0.5); -moz-transform:scale(0.5); transition:all ease 0.5s; -webkit-transition:all ease 0.5s; -ms-transition:all ease 0.5s; -o-transition:all ease 0.5s; -moz-transition:all ease 0.5s; background-image: url(../images/preloader.gif); background-repeat: no-repeat; background-position: center; } .overlay-ajax.active{ opacity:1; visibility:visible; transform:scale(1); -moz-transform:scale(1); -webkit-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); }
А в ваш файл JS необходимо внести следующий код, который будет отслеживать запуск и завершение Ajax команды
(function($, Drupal) { Drupal.behaviors.theme = { attach:function() { if(typeof(ajaxinit) == 'undefined'){ // Add Overlay $('body').append('<div class="overlay-ajax"></div>'); // Start ajax command $(document).ajaxSend(function() { $('.overlay-ajax').addClass('active'); }); // End ajax command $(document).ajaxSuccess(function() { $('.overlay-ajax').removeClass('active'); }); } ajaxinit = true; } }; }(jQuery, Drupal));
Из имеющихся модулей, для стилизации прелоадера – я предпочитаю Ajax Throbber. Который по умолчанию делает все-то, что нам необходимо.
Он не имеет интерфейса для выбора своих параметров стилизации. Все значения заносятся программно.
Список параметров:-
ajax_throbber_selection - позволяет изменить изображение прелоадера. Допустимые значения:
- circle
- three_dots
- square
- fading_circle
- ajax_throbber_bg_color - позволяет изменить бэкграунд оверлея.
- ajax_throbber_item_color - позволяет изменить цвет изображения прелоадера.
В качестве примера, создадим черный оверлей с прозрачностью 0.8, где в качестве изображения прелоадера будет использоваться square красного цвета.
Для этого нам понадобится hook_preprocess_page()
<?php /** * Implements hook_preprocess_page() */ function hook_preprocess_page(&$variables){ // Ajax throbber settings variable_set('ajax_throbber_selection', 'square'); variable_set('ajax_throbber_bg_color', '0,0,0, 0.8'); variable_set('ajax_throbber_item_color', '255,0,5, 0.5'); }
На самом деле решений данного вопроса очень много, если у вас есть универсальное средство стилизации, то буду рад услышать.