Ich füge Lade Effekte auf Ajax Verarbeitung .. es funktioniert gut in Mozilla aber CSS funktioniert nicht in Chrom

Question

Ich bin Ladeeffekte durch CSS hinzufügen .. es funktioniert ordnungsgemäß für Mozilla aber nicht für Chrom arbeiten .. Effekte nicht während Seitenlade für Chrome.

Mein CSS-Code-Schnipsel:

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

Verwendung In jQuery:

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

bitte die Änderungen vorschlagen, auch das Laden von CSS- in Chrom zu arbeiten.

Answer 1

Verwenden Sie die unten geänderten Stile. Sie müssen Präfixe für Chrome verwenden.

.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

versuchen Sie bitte die folgenden

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