Ich habe den nächsten Code für meinen Lader, ist das gleiche bei w3school.css loader mit Bild in der Mitte
css:
#loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Add animation to "page content" */
.animate-bottom {
position: relative;
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1s;
animation-name: animatebottom;
animation-duration: 1s
}
@-webkit-keyframes animatebottom {
from { bottom:-100px; opacity:0 }
to { bottom:0px; opacity:1 }
}
@keyframes animatebottom {
from{ bottom:-100px; opacity:0 }
to{ bottom:0; opacity:1 }
}
Aber wenn ich ein Bild setzen, das Bild Spin wie die CSS-Animation, möchte ich ein Bild in der Mitte des Laders.
Ich verwende Hintergrundbild in einem anderen Div nicht funktionieren.
Das ist mein fiddle
korrigiert mich wenn ich falsch bin. Was Sie wollen, ist, dass das Bild nicht drehen sollte und in der Mitte des Laders rechts vorhanden sein sollte. – Manish
@Manish Ja, ich will das – victor