Wie kann ich eine "Please Wait, Loading..."-Animation mit jQuery erstellen?

Question

Ich möchte eine "Bitte warten, laden"-Animation mit einem sich drehenden Kreis auf meiner Website platzieren. Wie sollte ich dies mit jQuery zu erreichen?

Answer 1

SVG-Animationen sind wahrscheinlich eine bessere Lösung für dieses Problem. Sie müssen sich nicht um das Schreiben von CSS kümmern und im Vergleich zu GIFs erhalten Sie eine bessere Auflösung und Alpha-Transparenz. Einige sehr gute SVG-Ladeanimationen, die Sie verwenden können, finden Sie hier: http://samherbert.net/svg-loaders/

Sie können diese Animationen auch direkt über einen von mir entwickelten Dienst nutzen: https://svgbox.net/iconset/loaders . Sie können die Füllung anpassen und die direkte Verwendung (Hotlinking) ist erlaubt.

Um das zu erreichen, was Sie mit jQuery machen wollen, sollten Sie wahrscheinlich ein Lade-Info-Element ausblenden und die .show() wenn Sie den Lader anzeigen möchten. Zum Beispiel zeigt dieser Code den Lader nach einer Sekunde an:

setTimeout(function() {
  $("#load").show();
}, 1000)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<div id="load" style="display:none">
    Please wait... 
    <img src="//s.svgbox.net/loaders.svg?fill=maroon&ic=tail-spin" 
         style="width:24px">
</div>

Answer 2

JQuery bietet Ereignis-Hooks für den Beginn und das Ende von AJAX-Anfragen. Sie können sich in diese einklinken, um Ihren Loader anzuzeigen.

Erstellen Sie zum Beispiel das folgende Div:

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

Setzen Sie ihn auf display: none in Ihren Stylesheets. Sie können es so gestalten, wie Sie es wollen. Sie können ein schönes Ladebild erzeugen unter Ajaxload.info wenn Sie das möchten.

Dann können Sie etwas wie das Folgende verwenden, damit es beim Senden von Ajax-Anfragen automatisch angezeigt wird:

$(document).ready(function () {

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

});

Fügen Sie einfach diesen Javascript-Block am Ende Ihrer Seite ein antes de am Ende des Body-Tags oder an einer anderen Stelle, die Sie für geeignet halten.

Wenn Sie nun Ajax-Anfragen senden, wird die #spinner div angezeigt werden. Wenn die Anfrage abgeschlossen ist, wird es wieder ausgeblendet.

Answer 3

Bei allem Respekt vor den anderen Beiträgen, Sie haben hier eine sehr einfache Lösung, die CSS3 und jQuery verwendet, ohne weitere externe Ressourcen oder Dateien zu verwenden.

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

Answer 4

Wenn Sie Turbolinks With Rails verwenden, ist dies meine Lösung:

Dies ist das CoffeeScript

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

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

Dies ist die SASS-CSS auf der Grundlage der ersten ausgezeichnete Antwort von Jonathan Sampson

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

Answer 5

Wie Mark H. sagte, ist die BlockUI der richtige Weg.

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.: Ich habe das ajax-loader.gif auf http://www.ajaxload.info/