Utiliser la classe css pour définir le chargeur ajax?

Question

J'ai l'appel Ajax et je voudrais utiliser ajax-loader.gif pour montrer le processus de chargement. J'ai déjà l'élément html span que j'utilise pour afficher les éléments sur l'écran. Je voudrais ajouter le chargeur en classe css. Une fois ajax démarré je voudrais pointer vers l'élément html et ajouter la classe en utilisant JQuery, une fois que ajax est fait, je vais supprimer la classe et cacher l'élément. Voici le code que j'ai essayé d'utiliser mais rien montré à l'écran:

CSS:

.loader{ 
    background-image: url('Images/ajax-loader.gif'); 
    height: 100px; 
    width: 100%; 
} 

HTML:

<span> 
    <span class="progressMsg" id="progressMsg"></span> 
</span> 

JQuery:

$('.progressMsg').addClass("loader").show(); 
$.ajax({ 
    type: 'POST', 
    url: 'my URL', 
    data: myForm 
}).done(function(obj){ 
    if(obj.STATUS === 200){ 
     $('.progressMsg').removeClass("loader").hide(); 
     return true; 
    }else{ 
     $('.progressMsg').addClass('alert-box error').show().html('Error!'); 
     setTimeout(function(){ $('.progressMsg').removeClass("alert-box error").hide().html(""); }, 5000); 
     return false; 
    } 
}).fail(function(jqXHR, textStatus, errorThrown){ 
    alert(errorThrown); 
}); 

Answer 1

Vous avez pour ajouter de la hauteur et de la largeur à l'élément, sinon il aura 0x0px et ne montrera rien.

.loader{ 
    background:black url('images/ajax-loader.gif') no-repeat 10px 50%; 
    border:1px solid #8ed9f6; 
    heigth: 50%; 
    width: 10px; 
} 

See here

Answer 2

portées ne sont pas poule espace vide. Vous devez en faire un bloc/bloc en ligne et définir les dimensions.

$('.progressMsg').addClass("loader").show();

.loader{ 
 
    background-image: url('http://www.ajaxload.info/cache/FF/FF/FF/00/00/00/1-0.gif'); 
 
    height: 100px; 
 
    width: 100%; 
 
    display: inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span> 
 
    <span class="progressMsg" id="progressMsg"></span> 
 
</span>