使用css類來設置ajax loader？

我有Ajax調用，我想用ajax-loader.gif來顯示加載過程。我已經有了用於在屏幕上顯示元素的html span元素。我想在CSS類中添加加載器。一旦ajax開始，我想指向html元素，並使用JQuery添加類，一旦完成了Ajax，我將刪除該類並隱藏該元素。下面是我嘗試使用，但沒有顯示在屏幕上的代碼：使用css類來設置ajax loader？

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

來源

2016-12-02 espresso_coffee

確保'.progressMsg'具有實際尺寸，而不是0：0像素 – LuudJacobs

是的問題是，你的容器沒有高度和寬度定義。設置這些屬性，你會看到你的形象。 – Kyle

-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

來源

2016-12-02 15:53:10

@epascarello我更新我的問題與我試圖用，但仍然沒有在屏幕上... –

那麼它是不是我的答案，但問題是inilne元素不會對.progressMsg類的寬度 – epascarello

@epascarello代碼我設置了寬度和高度，但仍然沒有顯示在屏幕上。 –

跨度沒有足夠的空間母雞空。您需要將其設置爲塊/內嵌塊並設置尺寸。

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

來源

2016-12-02 16:11:40 epascarello

diplay：內聯塊是關鍵。之後我把它放在我的css loader中顯示出來。 –

使用css類來設置ajax loader？

回答

相關問題