jQuery preloader

412

07 декабря 2017, 02:17

Здравствуйте, хотел поинтересоваться есть ли возможность сделать preload при клике на кнопку что бы пользователя уведомить что происходит какое-то действие. У меня есть поиск на сайте но он реализован на backend не через ajax. Через ajax не сделал по той причине что это поиск не из БД а из данных которые парсятся на другом сайте. Что нужно сделать, надо что бы пользователь нажал на поиск и на время перезагрузки страницы появилась какая-то гифка, посоветовали сделать через событие onBeforeunload или если jQuery .unload() но не помогло, если это вообще возможно реализовать то подскажите как?

Answer 1

После перезагрузки страницы loader исчезает.

$("#search").click(function(){ 
  $(".loader").css({"opacity":"1"}) 
});

.loader{ 
  opacity:0; 
  transition:0.8s; 
} 
button#search { 
    width: 100%; 
    height: 30px; 
    max-width: 362px; 
    margin: 0 auto; 
    background: #FFC107; 
    border: none; 
    color: white; 
    cursor: pointer; 
    display:table 
} 
img { 
   display:table; 
   margin: 0 auto; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
  
<button id="search">Поиск</button> 
 
<img class="loader" src="https://loading.io/spinners/typing/lg.-text-entering-comment-loader.gif">