Как создать анимацию "подождите, загрузка..." с помощью jQuery?

что касается фактического изображения загрузки,проверьте этот сайт для множества вариантов.

что касается отображения DIV с этим изображением, когда начинается запрос, у вас есть несколько вариантов:

A) вручную показать и скрыть изображение:

$('#form').submit(function() {
    $('#wait').show();
    $.post('/whatever.php', function() {
        $('#wait').hide();
    });
    return false;
});

B) Использовать ajaxStart и ajaxComplete:

$('#wait').ajaxStart(function() {
    $(this).show();
}).ajaxComplete(function() {
    $(this).hide();
});

С помощью этого элемента будет отображаться / скрываться для любой запрос. Может быть хорошим или плохим, в зависимости от потребность.

C) используйте отдельные обратные вызовы для конкретного запроса:

$('#form').submit(function() {
    $.ajax({
        url: '/whatever.php',
        beforeSend: function() { $('#wait').show(); },
        complete: function() { $('#wait').hide(); }
    });
    return false;
});

вместе с тем, что предложили Джонатан и Самир (оба отличные ответы кстати!), jQuery имеет некоторые встроенные события, которые он будет запускать для вас при выполнении запроса ajax.

здесь ajaxStart событие

показывать сообщение загрузки при запуске AJAX-запроса (и ни один из них не активен).

...и это брат,ajaxStop событие

прикрепить выполняемую функцию всякий раз, когда все запросы AJAX закончились. Это событие Ajax.

вместе они делают прекрасный способ показать сообщение о ходе работы, когда любая деятельность ajax происходит в любом месте страницы.

HTML-код:

<div id="loading">
  <p><img src="loading.gif" /> Please Wait</p>
</div>

сценарий:

$(document).ajaxStart(function(){
    $('#loading').show();
 }).ajaxStop(function(){
    $('#loading').hide();
 });

вы можете захватить анимированный GIF вращающегося круга с Ajaxload - вставьте это где-нибудь в файл вашего сайта heirarchy. Тогда вам нужно просто добавить HTML-элемент с правильным кодом, и удалить его, когда вы закончите. Это довольно просто:

function showLoadingImage() {
    $('#yourParentElement').append('<div id="loading-image"><img src="path/to/loading.gif" alt="Loading..." /></div>');
}

function hideLoadingImage() {
    $('#loading-image').remove();
}

вам просто нужно использовать эти методы в вашем вызове AJAX:

$.load(
     'http://example.com/myurl',
     { 'random': 'data': 1: 2, 'dwarfs': 7},
     function (responseText, textStatus, XMLHttpRequest) {
         hideLoadingImage();
     }
);

// this will be run immediately after the AJAX call has been made,
// not when it completes.
showLoadingImage();

это имеет несколько предостережений: прежде всего, если у вас есть два или более места, где может быть показано изображение загрузки, вы собираетесь нужно как-то отслеживать, сколько вызовов выполняется сразу, и только скрывать, когда они все сделаны. Это можно сделать с помощью простого счетчика, который должен работать практически для всех случаев.

во-вторых, это только скроет изображение загрузки при успешном вызове AJAX. Чтобы обработать состояния ошибок, вам нужно будет заглянуть в $.ajax, что более сложно, чем $.load, $.get и тому подобное, но намного более гибким.

отличное решение Jonathon ломается в IE8 (анимация не отображается вообще). Чтобы исправить это, измените CSS на:

.modal {
display:    none;
position:   fixed;
z-index:    1000;
top:        0;
left:       0;
height:     100%;
width:      100%;
background: rgba( 255, 255, 255, .8 ) 
            url('http://i.stack.imgur.com/FhHRx.gif') 
            50% 50% 
            no-repeat;
opacity: 0.80;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 80);
filter: alpha(opacity = 80)};

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

например, создайте следующий div:

<div id="spinner">
  <img src="images/spinner.gif" alt="Loading" />
</div>

установить display: none в ваш код. Вы можете стиль его так, как вы хотите. Вы можете создать хорошее изображение загрузки вAjaxload.info, если вы хотите.

затем вы можете использовать что-то вроде следующего, чтобы оно отображалось автоматически при отправке Ajax запросы:

$(document).ready(function () {

    $('#spinner').bind("ajaxSend", function() {
        $(this).show();
    }).bind("ajaxComplete", function() {
        $(this).hide();
    });

});

просто добавьте этот блок Javascript в конец вашей страницы до закрытие тега body или там, где вы сочтете нужным.

теперь, когда вы отправляете запросы Ajax,#spinner div будет показан. Когда запрос будет завершен, он снова будет скрыт.

Если вы используете Turbolinks с рельсами это мое решение:

Это CoffeeScript

$(window).on 'page:fetch', ->
  $('body').append("<div class='modal'></div>")
  $('body').addClass("loading")

$(window).on 'page:change', ->
  $('body').removeClass("loading")

Это SASS CSS, основанный на первом отличном ответе от Джонатана Сэмпсона

# loader.css.scss

.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, 0.4)
            asset-url('ajax-loader.gif', image)
            50% 50% 
            no-repeat;
}
body.loading {
    overflow: hidden;   
}

body.loading .modal {
    display: block;
}

как Марк H сказал, что blockUI-это путь.

Ex.:

<script type="text/javascript" src="javascript/jquery/jquery.blockUI.js"></script>
<script>
// unblock when ajax activity stops
$(document).ajaxStop($.unblockUI); 

$("#downloadButton").click(function() {

    $("#dialog").dialog({
        width:"390px",
        modal:true,
        buttons: {
            "OK, AGUARDO O E-MAIL!":  function() {
                $.blockUI({ message: '<img src="img/ajax-loader.gif" />' });
                send();
            }
        }
    });
});

function send() {
    $.ajax({
        url: "download-enviar.do",          
        type: "POST",
        blablabla
    });
}
</script>

Obs.: У меня есть ajax-загрузчик.gif on http://www.ajaxload.info/

при всем уважении к другим сообщениям, у вас есть очень простое решение, используя CSS3 и jQuery, без использования каких-либо дополнительных внешних ресурсов или файлов.

$('#submit').click(function(){
  $(this).addClass('button_loader').attr("value","");
  window.setTimeout(function(){
    $('#submit').removeClass('button_loader').attr("value","\u2713");
    $('#submit').prop('disabled', true);
  }, 3000);
});

#submit:focus{
  outline:none;
  outline-offset: none;
}

.button {
    display: inline-block;
    padding: 6px 12px;
    margin: 20px 8px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    background-image: none;
    border: 2px solid transparent;
    border-radius: 5px;
    color: #000;
    background-color: #b2b2b2;
    border-color: #969696;
}

.button_loader {
  background-color: transparent;
  border: 4px solid #f3f3f3;
  border-radius: 50%;
  border-top: 4px solid #969696;
  border-bottom: 4px solid #969696;
  width: 35px;
  height: 35px;
  -webkit-animation: spin 0.8s linear infinite;
  animation: spin 0.8s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  99% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  99% { transform: rotate(360deg); }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="submit" class="button" type="submit" value="Submit" />

обратите внимание, что при использовании asp.net mvc, с "использованием (Ajax.BeginForm(..."установка" ajaxStart " не будет работать.

используйте ajaxotions для преодоления этой проблемы:

(Ajax.BeginForm("ActionName", new AjaxOptions { OnBegin = "uiOfProccessingAjaxAction", OnComplete = "uiOfProccessingAjaxActionComplete" }))

это заставит кнопки исчезнуть, затем на их месте появится анимация "загрузка" и, наконец, просто отобразит сообщение об успехе.

$(function(){
    $('#submit').click(function(){
        $('#submit').hide();
        $("#form .buttons").append('<img src="assets/img/loading.gif" alt="Loading..." id="loading" />');
        $.post("sendmail.php",
                {emailFrom: nameVal, subject: subjectVal, message: messageVal},
                function(data){
                    jQuery("#form").slideUp("normal", function() {                 
                        $("#form").before('<h1>Success</h1><p>Your email was sent.</p>');
                    });
                }
        );
    });
});

большинство решений, которые я видел, либо ожидает, что мы создадим наложение загрузки, будем держать его скрытым, а затем отображать его, когда это необходимо, или покажем gif или изображение и т. д.

Я хотел разработать надежный плагин, где с помощью простого вызова jQuery я могу отобразить экран загрузки и снести его, когда задача будет завершена.

ниже код. Это зависит от шрифта awesome и jQuery:

/**
 * Raj: Used basic sources from here: http://jsfiddle.net/eys3d/741/
 **/


(function($){
    // Retain count concept: http://stackoverflow.com/a/2420247/260665
    // Callers should make sure that for every invocation of loadingSpinner method there has to be an equivalent invocation of removeLoadingSpinner
    var retainCount = 0;

    // http://stackoverflow.com/a/13992290/260665 difference between $.fn.extend and $.extend
    $.extend({
        loadingSpinner: function() {
            // add the overlay with loading image to the page
            var over = '<div id="custom-loading-overlay">' +
                '<i id="custom-loading" class="fa fa-spinner fa-spin fa-3x fa-fw" style="font-size:48px; color: #470A68;"></i>'+
                '</div>';
            if (0===retainCount) {
                $(over).appendTo('body');
            }
            retainCount++;
        },
        removeLoadingSpinner: function() {
            retainCount--;
            if (retainCount<=0) {
                $('#custom-loading-overlay').remove();
                retainCount = 0;
            }
        }
    });
}(jQuery)); 

просто поместите вышеизложенное в файл js и включите его во все проект.

ссылка:

$.loadingSpinner();
$.removeLoadingSpinner();

Per https://www.w3schools.com/howto/howto_css_loader.asp, это 2-шаговый процесс без JS:

1.Добавьте этот HTML, где вы хотите spinner:<div class="loader"></div>

2.Добавьте этот CSS, чтобы сделать фактический счетчик:

.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

Я использую CSS3 для анимации

/************ CSS3 *************/
.icon-spin {
  font-size: 1.5em;
  display: inline-block;
  animation: spin1 2s infinite linear;
}

@keyframes spin1{
    0%{transform:rotate(0deg)}
    100%{transform:rotate(359deg)}
}

/************** CSS3 cross-platform ******************/

.icon-spin-cross-platform {
  font-size: 1.5em;
  display: inline-block;
  -moz-animation: spin 2s infinite linear;
  -o-animation: spin 2s infinite linear;
  -webkit-animation: spin 2s infinite linear;
  animation: spin2 2s infinite linear;
}

@keyframes spin2{
    0%{transform:rotate(0deg)}
    100%{transform:rotate(359deg)}
}
@-moz-keyframes spin2{
    0%{-moz-transform:rotate(0deg)}
    100%{-moz-transform:rotate(359deg)}
}
@-webkit-keyframes spin2{
    0%{-webkit-transform:rotate(0deg)}
    100%{-webkit-transform:rotate(359deg)}
}
@-o-keyframes spin2{
    0%{-o-transform:rotate(0deg)}
    100%{-o-transform:rotate(359deg)}
}
@-ms-keyframes spin2{
    0%{-ms-transform:rotate(0deg)}
    100%{-ms-transform:rotate(359deg)}
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<div class="row">
  <div class="col-md-6">
    Default CSS3
    <span class="glyphicon glyphicon-repeat icon-spin"></span>
  </div>
  <div class="col-md-6">
    Cross-Platform CSS3
    <span class="glyphicon glyphicon-repeat icon-spin-cross-platform"></span>
  </div>
</div>