Jak mogę utworzyć animację "proszę czekać, ładowanie ..." przy użyciu jQuery?

Jeśli chodzi o rzeczywisty obraz ładowania, Sprawdź tę stronę dla kilku opcji.

Jeśli chodzi o wyświetlanie DIV z tym obrazem, gdy zaczyna się żądanie, masz kilka opcji:

A) ręcznie Pokaż I Ukryj obraz:

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

B) użyj ajaxStart i ajaxComplete :

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

Użycie tego elementu spowoduje wyświetlenie / ukrycie dla dowolnego żądania. Może być dobry lub zły, w zależności od potrzeby.

C) Użyj indywidualnych wywołań zwrotnych dla zapytanie szczególne:

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

Wraz z tym, co zasugerował Jonathan i Samir (obie doskonałe odpowiedzi btw!), jQuery ma wbudowane zdarzenia, które odpali dla Ciebie podczas składania żądania ajax.

Jest ajaxStart event

Pokazuje komunikat wczytywania za każdym razem, gdy żądanie AJAX się Uruchamia (a żadne z nich nie jest już aktywne).

...i to brother, the ajaxStop event

Dołącz funkcję, która ma być wykonywana po zakończeniu wszystkich żądań AJAX. To jest Ajax Wydarzenie.

Razem tworzą świetny sposób, aby pokazać komunikat postępu, gdy jakiekolwiek działanie ajax dzieje się w dowolnym miejscu na stronie.

HTML:

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

Skrypt:

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

Możesz pobrać animowany GIF z kręcącego się kręgu z Ajaxload - wsadź go gdzieś w pliku swojej strony. Następnie wystarczy dodać element HTML z prawidłowym kodem i usunąć go, gdy skończysz. Jest to dość proste:

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

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

Następnie wystarczy użyć tych metod w wywołaniu 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();

To ma kilka zastrzeżeń: po pierwsze, jeśli masz dwa lub więcej miejsc, które mogą być wyświetlane wczytywanie obrazu, będziesz musiał śledzić, ile rozmowy są uruchomione na raz, a ukrywają się tylko wtedy, gdy są gotowe. Można to zrobić za pomocą prostego licznika, który powinien działać w prawie wszystkich przypadkach.

Po Drugie, ukryje to tylko obraz ładowania podczas pomyślnego połączenia AJAX. Aby obsłużyć Stany błędów, musisz przyjrzeć się $.ajax, która jest bardziej złożona niż $.load, $.get i tym podobne, ale też bardziej elastyczne.

Doskonałe rozwiązanie Jonathona psuje się w IE8 (animacja w ogóle się nie pokazuje). Aby to naprawić, Zmień CSS na:

.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 dostarcza Hooki zdarzeń, gdy żądania AJAX zaczynają się i kończą. Możesz podłączyć się do nich, aby pokazać swój ładowacz.

Na przykład utwórz następujący div:

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

Ustaw go na display: none w arkuszach stylów. Możesz go wystylizować, jak chcesz. Możesz wygenerować ładujący obrazek w Ajaxload.info , jeśli chcesz.

Następnie możesz użyć czegoś takiego jak poniżej, aby było wyświetlane automatycznie podczas wysyłania żądań Ajax:

$(document).ready(function () {

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

});

Po prostu dodaj ten blok Javascript na końcu twojej strony przed zamknięciem tagu body lub gdziekolwiek uznasz to za stosowne.

Teraz, gdy wysyłasz żądania Ajax, wyświetlony zostanie #spinner div. Po zakończeniu żądania zostanie ono ponownie Ukryte.

Jeśli używasz Turbolinków z szynami to jest moje rozwiązanie:

This is the CoffeeScript

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

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

Jest to CSS SASS oparty na pierwszej doskonałej odpowiedzi Jonathana Sampsona

# 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;
}

Tak jak Mark H powiedział blockUI jest drogą.

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.: Mam ajax-loader.gif na http://www.ajaxload.info/

Z całym szacunkiem dla innych postów, masz tutaj bardzo proste rozwiązanie, używając CSS3 i jQuery, bez użycia dodatkowych zewnętrznych zasobów ani plików.

$('#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" />

Zauważ, że przy użyciu asp.net mvc, z "using (Ajax.BeginForm(..."ustawienie " ajaxStart" nie zadziała.

Użyj Ajax, aby rozwiązać ten problem:

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

Spowoduje to, że przyciski znikną, a na ich miejscu pojawi się animacja "wczytywania" i na koniec wyświetli komunikat o sukcesie.

$(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>');
                    });
                }
        );
    });
});

Większość rozwiązań, które widziałem, albo oczekuje od nas zaprojektowania nakładki ładującej, ukrycia jej, a następnie odkrycia jej w razie potrzeby, albo pokazania gifa lub obrazu itp.

Chciałem stworzyć solidną wtyczkę, gdzie za pomocą zwykłego wywołania jQuery mogę wyświetlić ekran ładowania i zburzyć go po zakończeniu zadania.

Poniżej znajduje się kod. To zależy od Font awesome i 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)); 

Wystarczy umieścić powyższe w pliku js i dołączyć go w całym projekt.

Inwokacja:

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

Per https://www.w3schools.com/howto/howto_css_loader.asp , jest to proces dwuetapowy bez JS:

1.Dodaj ten HTML tam gdzie chcesz: <div class="loader"></div>

2.Dodaj ten CSS, aby utworzyć rzeczywisty spinner:

.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); }
}

Używam CSS3 do animacji

/************ 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>