Прелоадер — это индикатор загрузки, который показывается на сайте, пока основной контент еще не загрузился. В этой статье мы рассмотрим, как добавить прелоадер на ваш сайт с помощью простого 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';
});
Теперь у вас есть прелоадер, который будет отображаться на вашем сайте, пока основной контент загружается. 😃
Не забудьте проверить ваш сайт на разных устройствах и браузерах, чтобы убедиться в корректной работе прелоадера. Удачи в веб-разработке!
Добавить комментарий