cssクラスを使用してajaxローダーを設定しますか？

Question

私はAjaxコールを持っており、ローディングプロセスを示すのにajax-loader.gifを使用したいと思います。私はすでに画面上に要素を表示するために使用するhtml span要素を持っています。私はCSSクラスでローダーを追加したいと思います。 ajaxが開始されたら、html要素を指してJQueryを使用してクラスを追加します.Ajaxが完了すると、クラスを削除して要素を非表示にします。

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

ここで私が使用しようとしたが、何も画面に現れていないコードがありますheigthとwidthを要素に追加します。そうでなければ0x0pxを持ち、何も表示しません。

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

See here

Answer 2

スパンは宇宙編が空ではありません。それをブロック/インラインブロックにして寸法を設定する必要があります。

$('.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>