Вебинары Разобраться в IT Реферальная программа
Программирование Аналитика Дизайн Маркетинг
01 Июн 2023
3 мин
2661

Как добавить прелоадер на сайт

Прелоадер — это индикатор загрузки, который показывается на сайте, пока основной контент еще не загрузился. В этой статье мы рассмотрим, как добавить прелоадер на ваш сайт с помощью простого HTML, CSS и JavaScript кода.

Станьте веб-разработчиком с нуля за 15 месяцев на курсе онлайн-университета Skypro. Преподаватели — практикующие эксперты из VK, «Альфа-Банка», Skyeng и других крупных компаний. В программе нет лишней теории, зато много практических заданий, а результаты курсовых можно положить в портфолио. Специалисты центра карьеры помогут с резюме, сопроводительными письмами и собеседованиями.

1. Создание HTML-структуры

Для начала, создайте HTML-структуру прелоадера. Обычно прелоадер представляет собой блок с анимированным изображением или текстом. В этом примере мы будем использовать анимацию на основе CSS.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Пример прелоадера</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="preloader">
    <div class="spinner"></div>
  </div>
  <!-- Основной контент сайта -->
  <div id="content">
    <!-- Здесь будет ваш контент -->
  </div>
  <script src="script.js"></script>
</body>
</html>

2. Написание CSS-стилей

Теперь перейдите к стилизации прелоадера с помощью CSS. В этом примере мы создадим анимацию вращения.

/* styles.css */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #cccccc;
  border-top-color: #1a1a1a;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

На курсе Skypro «Веб-разработчик» освоите JavaScript, GitHub, Tilda, Postman, HTML, CSS и другие программы и инструменты, научитесь решать реальные задачи разработчика и работать в команде. Все учебные проекты можно положить в портфолио и устроиться на работу по новой специальности еще в процессе обучения.

3. Добавление JavaScript

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

// script.js
window.addEventListener('load', function () {
  var preloader = document.getElementById('preloader');
  preloader.style.display = 'none';
});

Теперь у вас есть прелоадер, который будет отображаться на вашем сайте, пока основной контент загружается. 😃

Не забудьте проверить ваш сайт на разных устройствах и браузерах, чтобы убедиться в корректной работе прелоадера. Удачи в веб-разработке!

Добавить комментарий