我正在加載ajax處理加載效果..其工作正常在Mozilla中但css不工作在鉻

我通過css添加加載效果..其正常工作的mozilla但不工作的鉻..效果沒有看期間頁面加載的鉻。我正在加載ajax處理加載效果..其工作正常在Mozilla中但css不工作在鉻

我的CSS代碼片段：

.loadersmall { 
    -moz-border-bottom-colors: none; 
    -moz-border-left-colors: none; 
    -moz-border-right-colors: none; 
    -moz-border-top-colors: none; 
    animation: 1s linear 0s normal none infinite running spin; 
    border-color: #B6E8FA #00ADEE #00ADEE; 
    border-image: none; 
    border-radius: 50%; 
    border-style: solid; 
    border-width: 5px; 
    height: 50px; 
    width: 50px; 
    margin-left: 251px; 
    margin-bottom: 10px; 
}

使用在jQuery中：

$("form#photodata").submit(function(e){ 
     $('.loadersmall').show(); 
     $.ajax({ 
       ................ 
       success: function (data1) { 
        $('.loadersmall').hide(); 
       } 
     }) 
});

請提出修改工作負載CSS鉻也。

來源

2017-07-05 Amita Patil

我能看到你的'阿賈克斯function'，後還在阿賈克斯 –

示例代碼中你嘗試不-moz-前綴？ – Albeis

你需要使用-webkit for chrome –

使用下面的修改樣式。你需要使用chrome的前綴。

.loadersmall, 
 
.loadersmall:after { 
 
    border-radius: 50%; 
 
    width: 50px; 
 
    height: 50px; 
 
} 
 
.loadersmall { 
 
    margin: 60px auto; 
 
    font-size: 10px; 
 
    position: relative; 
 
    text-indent: -9999em; 
 
    border-top: 5px solid #00ADEE; 
 
    border-right: 5px solid #00ADEE; 
 
    border-bottom: 5px solid #00ADEE; 
 
    border-left: 5px solid #B6E8FA; 
 
    -webkit-transform: translateZ(0); 
 
    -ms-transform: translateZ(0); 
 
    transform: translateZ(0); 
 
    -webkit-animation: 1s linear 0s normal none infinite running spin; 
 
    animation: 1s linear 0s normal none infinite running spin; 
 
} 
 
@-webkit-keyframes spin { 
 
    0% { 
 
    -webkit-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    -webkit-transform: rotate(360deg); 
 
    transform: rotate(360deg); 
 
    } 
 
} 
 
@keyframes spin { 
 
    0% { 
 
    -webkit-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    -webkit-transform: rotate(360deg); 
 
    transform: rotate(360deg); 
 
    } 
 
}

<div class="loadersmall"></div>

來源

2017-07-05 09:45:41 Karthik

對不起，但它不起作用 –

你使用JavaScript來加載這個加載器？如果有，請分享 – Karthik

我還添加了一段代碼。它的工作正常... – Karthik

請嘗試以下，

.loadersmall { 
    border-bottom-colors: none; 
    border-left-colors: none; 
    border-right-colors: none; 
    border-top-colors: none; 
    animation: 1s linear 0s normal none infinite running spin; 
    border-color: #B6E8FA #00ADEE #00ADEE; 
    border-image: none; 
    border-radius: 50%; 
    border-style: solid; 
    border-width: 5px; 
    height: 50px; 
    width: 50px; 
    margin-left: 251px; 
    margin-bottom: 10px; 
}

來源

2017-07-05 09:48:23 Renu

對不起，但它不工作 –

我正在加載ajax處理加載效果..其工作正常在Mozilla中但css不工作在鉻

回答

相關問題