Какие события необходимо отлавливать для создания полосы загрузки страницы?

Подскажите какие события необходимо отлавливать для создания полосы загрузки страницы?Я попрбовал так, но у меня идет скачок с 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);
});
  • Вопрос задан
  • 427 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы