Comment puis-je créer une animation "Veuillez patienter, chargement..." en utilisant jQuery?

En ce qui concerne l'image de chargement réelle, consultez ce site pour un tas d'options.

En ce qui concerne l'affichage D'un DIV avec cette image lorsqu'une requête commence, vous avez quelques choix:

A) afficher et masquer manuellement L'image:

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

B) Utiliser ajaxStart et ajaxComplete:

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

En utilisant ceci, l'élément affichera / masquer pour toute requête . Pourrait être bon ou mauvais, selon le besoin.

C) utiliser des rappels individuels pour demande particulière:

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

Avec ce que Jonathan et Samir ont suggéré (les deux excellentes réponses btw!), jQuery a des événements intégrés qu'il déclenchera pour vous lors d'une requête ajax.

, Il y a la ajaxStart événement

Affiche un message de chargement chaque fois qu'une requête AJAX démarre (et aucune n'est déjà active).

...et c'est le frère, la ajaxStop événement

Attachez une fonction à exécuter chaque fois que toutes les requêtes AJAX sont terminées. C'est un Ajax Événement.

Ensemble, ils font un bon moyen d'afficher un message de progression lorsque toute activité ajax se produit n'importe où sur la page.

HTML:

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

Script:

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

Vous pouvez saisir un GIF animé d'un cercle de rotation de Ajaxload - coller quelque part dans votre fichier de site web heirarchy. Ensuite, il vous suffit d'ajouter un élément HTML avec le code correct et de le supprimer lorsque vous avez terminé. C'est assez simple:

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

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

Vous avez alors juste besoin d'utiliser ces méthodes dans votre appel 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();

Cela comporte quelques mises en garde: tout d'abord, si vous avez deux ou plusieurs endroits où l'image de chargement peut être affichée, vous devrez garder une trace de combien les appels sont en cours d'exécution à la fois en quelque sorte, et ne se cachent que quand ils sont tous faits. Cela peut être fait en utilisant un compteur simple, qui devrait fonctionner pour presque tous les cas.

Deuxièmement, cela ne masquera que l'image de chargement lors d'un appel AJAX réussi. Pour gérer les états d'erreur, vous aurez besoin de regarder dans $.ajax, ce qui est plus complexe que $.load, $.get et autres, mais beaucoup plus souple aussi.

L'excellente solution de Jonathon casse dans IE8 (l'animation ne s'affiche pas du tout). Pour résoudre ce problème, changez le CSS en:

.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 fournit des hooks d'événements pour le début et la fin des requêtes AJAX. Vous pouvez accrocher dans ceux-ci pour montrer votre chargeur.

Par exemple, créez la div suivante:

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

Définissez-le sur display: none dans vos feuilles de style. Vous pouvez le styliser comme vous le souhaitez. Vous pouvez générer une belle image de chargement à Ajaxload.info , si tu veux.

Ensuite, vous pouvez utiliser quelque chose comme ce qui suit pour le faire apparaître automatiquement lors de l'envoi de requêtes Ajax:

$(document).ready(function () {

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

});

Ajoutez simplement ce bloc Javascript à la fin de votre page avant fermeture de votre balise de corps ou où bon vous semble.

Maintenant, chaque fois que vous envoyez des requêtes Ajax, le #spinner div sera affiché. Lorsque la demande est terminée, elle sera à nouveau cachée.

Si vous utilisez des Turbolinks avec des Rails, c'est ma solution:

C'est le CoffeeScript

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

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

C'est le CSS SASS basé sur la première excellente réponse de 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;
}

Comme Mark H a dit que le blockUI est le chemin.

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.: J'ai eu le chargeur ajax.gif sur http://www.ajaxload.info/

Avec tout le respect dû aux autres messages, Vous avez ici une solution très simple, en utilisant CSS3 et jQuery, sans utiliser d'autres ressources externes ni fichiers.

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

Notez que lorsque vous utilisez asp.net mvc, avec " utilisation (Ajax.BeginForm(..."définir le" ajaxStart " ne fonctionnera pas.

Utilisez les ajaxotions pour résoudre ce problème:

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

Cela ferait disparaître les boutons, puis une animation de "chargement" apparaîtrait à leur place et enfin afficherait simplement un message de succès.

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

La plupart des solutions que j'ai vues s'attendent à ce que nous concevions une superposition de chargement, la gardions cachée, puis la montrions si nécessaire, ou montrions un gif ou une image, etc.

Je voulais développer un plugin robuste où, avec un simple appel jQuery, je peux afficher l'écran de chargement et le démolir lorsque la tâche est terminée.

Voici le code. Cela dépend de Font awesome et 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)); 

Il suffit de mettre ce qui précède dans un fichier js et de l'inclure dans le projet.

Invocation:

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

Par https://www.w3schools.com/howto/howto_css_loader.asp, c'est un procédé en 2 étapes sans JS:

1.Ajoutez ce code HTML où vous voulez le spinner: <div class="loader"></div>

2.Ajoutez ce CSS pour faire le spinner réel:

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

J'utilise CSS3 pour l'animation

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