Подскажите какие события необходимо отлавливать для создания полосы загрузки страницы?Я попрбовал так, но у меня идет скачок с 0 до 50 и с 50 до 100
При этом в консоле у меня выводится 4 единицы, по две подряд
document.addEventListener('readystatechange', (event) => {
if (document.readyState == 1) {
console.log(1)
preloaderPercent.innerHTML = 25
gsap.to(preloaderProcess, {
width: '25%'
})
}
if (document.readyState == 3) {
console.log(1)
preloaderPercent.innerHTML = 75
gsap.to(preloaderProcess, {
width: '50%'
})
}
})
document.addEventListener('DOMContentLoaded', (event) => {
console.log(1)
preloaderPercent.innerHTML = 50
gsap.to(preloaderProcess, {
width: '75%'
})
});
window.addEventListener('load', (event) => {
console.log(1)
preloaderPercent.innerHTML = 100
const tl = gsap.timeline()
tl.to(preloaderProcess, {
width: '100%'
})
tl.to(preloaderProcessWrap, {
autoAlpha: 0
})
setTimeout(() => {
preloaderAnimation.play()
}, 500);
});