Как сделать страницу загрузки на сайте?

Создание страницы загрузки на сайте с использованием JavaScript может быть достигнуто несколькими способами. Рассмотрим два основных подхода: использование простого элемента загрузки и создание анимированного прогресс-бара.

1. Использование простого элемента загрузки:
В этом случае мы создадим элемент <div>, который будет показывать информацию о загрузке страницы. Для этого нужно выполнить следующие шаги:

Шаг 1: Создать HTML-структуру:
Добавьте следующий код в HTML-документ:

<div id="loader">
  <h1>Loading...</h1>
</div>

Шаг 2: Стилизация элемента:
Добавьте следующий CSS-код в ваш файл стилей:

#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f3f3f3;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

#loader h1 {
  font-size: 24px;
  color: #333;
}

Шаг 3: Показать и скрыть элемент загрузки:
Добавьте следующий JavaScript-код перед закрывающим тегом </body>:

window.addEventListener('load', function() {
  var loader = document.getElementById('loader');
  loader.style.display = 'none';
});

2. Создание анимированного прогресс-бара:
Если вы хотите создать более визуально привлекательную страницу загрузки, вы можете воспользоваться анимированным прогресс-баром. Вот как это сделать:

Шаг 1: Создать HTML-структуру:
Добавьте следующий код в HTML-документ:

<div id="loader">
  <div id="progress-bar"></div>
</div>

Шаг 2: Стилизация элементов:
Добавьте следующий CSS-код в ваш файл стилей:

#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #f3f3f3;
}

#progress-bar {
  width: 0;
  height: 100%;
  background-color: #4caf50;
  animation: progress 2s linear infinite;
}

@keyframes progress {
  0% { width: 0; }
  100% { width: 100%; }
}

Шаг 3: Показать и скрыть прогресс-бар:
Добавьте следующий JavaScript-код перед закрывающим тегом </body>:

window.addEventListener('load', function() {
  var loader = document.getElementById('loader');
  loader.style.display = 'none';
});

Эти два подхода позволят вам создать страницу загрузки на вашем сайте с использованием JavaScript. Вы можете выбрать подход, который лучше всего подходит для ваших потребностей и дизайна сайта.