Индикатор загрузки

407

24 ноября 2016, 09:58

Подскажите, как красиво (правильно) организовать индикатор загрузки на странице во время выполнения асинхронных запросов?
Сейчас придумал так: беру гифку, начало загрузки - показываем гифку модально на все окно. Загрузка и/или обработка ответа завершена - скрываем гифку.
Но насколько это правильно, красиво, хорошо - я не знаю.

Под модальным индикатором на все окно, я подразумеваю - маленькую гифку крутящуюся в центре окна в то время как все остальное затемненно

Answer 1

Да, вы верно рассуждаете. Но вместо того, что бы блокировать во весь экран, можно блокировать соответствующий блок (таблицу).

function asyncRequest(callback) { 
  // асинхронная операция, например, ajax-запрос 
  setTimeout(callback, 2000); 
} 
 
// событие при клике на кнопку 
$('.load').click(function() { 
    var $preloader = $(this).parent().find('.modal__preloader'); 
    $preloader.show(); // показываем прелоадер 
    asyncRequest(function() { 
      $preloader.hide(); // после загрузки данных, скрываем  
    }); 
});

.modal { 
  background: #333;   
  padding: 10px; 
  width: 150px; 
  height: 150px; 
  position: relative;  
  float: left; 
  margin: 5px; 
} 
 
.modal__preloader { 
  display: none; 
  opacity: 0.8; 
  position: absolute;  
  left: 0;  
  top: 0;  
  z-index: 999;  
  width: 100%;  
  height: 100%;  
  overflow: visible;  
  background: #333 url('http://files.mimoymima.com/images/loading.gif') no-repeat center center;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="modal"> 
  <button class="load">load</button> 
  <div class="modal__preloader"></div> 
</div> 
 
<div class="modal"> 
  <button class="load">load</button> 
  <div class="modal__preloader"></div> 
</div>