Lukas Lukas - 3 months ago 22
CSS Question

Stop infinite animation in preloader

I´m now working on preloader for webpage, but cant figure how to stop the animation, so the javascript could to it's work and fade the preloader away.

Basically heres the whole situation and I just can't get it working right.



$(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>





Would appriciate any help :-)

Thank you.

Answer

Are you missing this

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

$(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);
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="preloader">
        <div class="cssload-whirlpool"></div>
</div>