私は...その...モジラのために正常に動作しますが、クロムのために働いていない効果が中に見ていないAJAX処理の負荷の影響が..その作業モジラで罰金が、CSSクロム

Question

で働いていない私は、CSSによる負荷効果を追加してい追加していクロムのページ読み込み

私のCSSコードスニペット：jQueryので

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

用途：

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

もクロームでロードCSSを動作するように変更を提案してください。

Answer 1

以下の変更されたスタイルを使用してください。 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>

Answer 2

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