0
Ich arbeite jetzt auf Preloader für Webseite, kann aber nicht, wie man die Animation zu stoppen, so dass das Javascript könnte es funktionieren und verblassen den Preloader weg.Stop unendlich Animation in preloader
Grundsätzlich Heres die ganze Situation und ich kann es einfach nicht richtig funktionieren.
$(window).load(function() {
$('.cssload-whirlpool').fadeOut();
$('.preloader').delay(350).fadeOut('slow');
$('body').delay(350).css({'overflow':'visible'});
}).preloader {
position: fixed;
top: 0;
width: 100%;
height: 100%;
background: white;
z-index: 99999;
}
.cssload-container {
position: relative;
}
.cssload-whirlpool,
.cssload-whirlpool::before,
.cssload-whirlpool::after {
position: absolute;
top: 50%;
left: 50%;
border: 1px solid rgb(204, 204, 204);
border-left-color: rgb(0, 0, 0);
border-radius: 974px;
-o-border-radius: 974px;
-ms-border-radius: 974px;
-webkit-border-radius: 974px;
-moz-border-radius: 974px;
}
.cssload-whirlpool {
margin: -24px 0 0 -24px;
height: 49px;
width: 49px;
animation: cssload-rotate 1150ms linear infinite;
-o-animation: cssload-rotate 1150ms linear infinite;
-ms-animation: cssload-rotate 1150ms linear infinite;
-webkit-animation: cssload-rotate 1150ms linear infinite;
-moz-animation: cssload-rotate 1150ms linear infinite;
}
.cssload-whirlpool::before {
content: "";
margin: -22px 0 0 -22px;
height: 43px;
width: 43px;
animation: cssload-rotate 1150ms linear infinite;
-o-animation: cssload-rotate 1150ms linear infinite;
-ms-animation: cssload-rotate 1150ms linear infinite;
-webkit-animation: cssload-rotate 1150ms linear infinite;
-moz-animation: cssload-rotate 1150ms linear infinite;
}
.cssload-whirlpool::after {
content: "";
margin: -28px 0 0 -28px;
height: 55px;
width: 55px;
animation: cssload-rotate 2300ms linear infinite;
-o-animation: cssload-rotate 2300ms linear infinite;
-ms-animation: cssload-rotate 2300ms linear infinite;
-webkit-animation: cssload-rotate 2300ms linear infinite;
-moz-animation: cssload-rotate 2300ms linear infinite;
}
@keyframes cssload-rotate {
100% {
transform: rotate(360deg);
}
}
@-o-keyframes cssload-rotate {
100% {
-o-transform: rotate(360deg);
}
}
@-ms-keyframes cssload-rotate {
100% {
-ms-transform: rotate(360deg);
}
}
@-webkit-keyframes cssload-rotate {
100% {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes cssload-rotate {
100% {
-moz-transform: rotate(360deg);
}
}<div class="preloader">
<div class="cssload-whirlpool"></div>
</div>Würde jede Hilfe appriciate :-)
Danke.
Sind Sie versuchen, es auszublenden, entfernen Sie es, die Animation oder etwas stoppen sonst? –
Der .preloader ist z-index leere weiße Seite, also loswerden, damit der Inhalt der Webseite darunter erscheint. Es sollte als falsche Vorladeseite funktionieren. – Lukas
Es sieht so aus, als ob es funktioniert, nachdem Sie jQuery in das Snippet aufgenommen haben ... '$' ist nicht definiert, daher erhalten Sie einen Fehler und eine unendliche Animation. –