В общем нужно сделать так чтобы скорость анимации плавно изменялось. Я не многу понять как сделать так чтобы все было плавно. Как исправить дергание загрузки?
document.body.onload = function () {
setTimeout(function () { // скрывает preloader через время
clearInterval(loadTime);
document.getElementById('preloader').style.opacity = '0';
setTimeout(function () {
document.getElementById('preloader').style.display = 'none';
}, 1000);
}, 5000);
var loadSpeed = 1; // скрость анимации
var loadTime = setInterval(function () {
var loader = document.getElementsByClassName('load')[0];
loader.style.animationDuration = loadSpeed + 's';
loadSpeed -= .2;
}, 1000)
}
#preloader{
position: fixed;
width: 100%;
height: 100%;
background-color: black;
opacity: 1;
transition: 1s;
}
.load{
position: relative;
width: 80px;
height: 80px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transition: 1s;
border: 20px solid white;
border-top-color: blue;
border-radius: 50%;
animation: load 1s infinite linear;
}
@keyframes load {
100%{
transform: translate(-50%, -50%) rotate(360deg);
}
}
<div id="preloader">
<div class="load"></div>
</div>
loadSpeed -= 0.001; }, 10)
— так не видно дергов.