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

Dadurch würden die Schaltflächen verschwinden, dann würde an ihrer Stelle eine Animation von "Laden" erscheinen und schließlich nur noch eine Erfolgsmeldung angezeigt.

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

Answer 2

Die meisten Lösungen, die ich gesehen habe, erwarten entweder, dass wir ein Lade-Overlay entwerfen, es ausblenden und dann bei Bedarf wieder einblenden, oder dass wir ein Gif oder ein Bild usw. anzeigen.

Ich wollte ein robustes Plugin entwickeln, bei dem ich mit einem einfachen jQuery-Aufruf den Ladebildschirm anzeigen und ihn wieder abbauen kann, wenn die Aufgabe abgeschlossen ist.

Nachstehend finden Sie den Code. Es hängt von Font awesome und jQuery ab:

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

Fügen Sie einfach die oben genannten Elemente in eine js-Datei ein und binden Sie sie in das Projekt ein.

CSS-Zusatz:

#custom-loading-overlay {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: #000;
    opacity: 0.8;
    filter: alpha(opacity=80);
}
#custom-loading {
    width: 50px;
    height: 57px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -28px 0 0 -25px;
}

Anrufung:

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

Answer 3

Beachten Sie, dass bei der Verwendung von ASP.Net MVC, mit using (Ajax.BeginForm(... die Einstellung der ajaxStart wird nicht funktionieren.

Verwenden Sie die AjaxOptions um dieses Problem zu lösen:

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

Answer 4

Ich verwende CSS3 für Animationen

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

Answer 5

Per https://www.w3schools.com/howto/howto_css_loader.asp Dies ist ein zweistufiger Prozess ohne JS:

1. fügen Sie diesen HTML-Code an der Stelle ein, an der Sie den Spinner haben möchten: <div class="loader"></div>

2. dieses CSS hinzufügen, um den eigentlichen Spinner zu erstellen:

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