Анимация загрузки сайта — это небольшой инструмент, чтобы удержать внимание потенциальных пользователей. Редко какой веб-сайт загружается мгновенно. Обычно на процесс загрузки уходит какое-то время, пока загрузятся скрипты, картинки, стили и др. В момент загрузки всех компонентов страницы она видоизменяется. Этот процесс не всегда очень красивый, поэтому его скрывает анимация загрузки страницы.
По сути, анимация загрузки сайта — это то, что видит пользователь, пока веб-сайт загружается. Она представляет собой псевдо страницу, перекрывающую весь экран устройства на время загрузки основной страницы веб-сайта. На этой псевдо странице можно отразить что угодно, но обычно на ней показывают какую-нибудь анимированную фигуру. Такая псевдо страница сразу исчезает, когда основная страница сайта загружается.
Анимация загрузки сайта делается при помощи HTML, CSS и немного JavaScript, также иногда применяют GIF или SVG-картинку.
Анимация загрузки сайта
Анимация загрузки на сайте создается довольно просто. Для начала необходимо создать HTML-структуру анимации и разместить ее после открывающегося тега <body>. Потом при помощи CSS ее настраивают таким образом, чтобы она занимала весь экран устройства пользователя. Непосредственно саму анимацию можно сделать:
на «чистом» CSS;
при помощи анимированной GIF-картинки;
при помощи анимированной SVG-картинки.
Анимация загрузки должна перекрывать весь контент основной страницы, пока он загружается, а после его загрузки анимацию нужно скрыть. Показ и скрытие анимации происходят при помощи небольшого JS-скрипта.
Анимация загрузки на «чистом» CSS
Первый этап создания анимации — создание HTML-элемента, который размещается сразу после открывающего тега <body>. Код будет следующим:
<div class="animationLoader">
<div class="animationLoader__row">
<div class="animationLoader__item"></div>
<div class="animationLoader__item"></div>
</div>
</div>
Поясняем код:
animationLoader — это контейнер, занимающий весь экран устройства; именно он «прикрывает» содержимое страницы;
animationLoader_low и animationLoader_item — это контейнеры, участвующие в создании анимации при помощи CSS.
Второй этап при создании анимации загрузки — придание стилей нашим HTML-элементам. CSS-код будет следующим:
.animationLoader {
/*фиксируем положение основного контейнера*/
position: fixed;
/* расставляем координаты контейнера*/
left: 0;
top: 0;
right: 0;
bottom: 0;
/* выставляем цвет фона основного контейнера */
background: #fff;
/* важно разместить основной блок поверх всех остальных компонентов страницы, поэтому z-index у него должен быть больше, чем у остальных */
z-index: 1001;
}
.animationLoader __row {
position: relative;
top: 50%;
left: 50%;
width: 80px;
height: 80px;
margin-top: -45px;
margin-left: -45px;
text-align: center;
animation: animationLoader -rotate 2s infinite linear;
}
.animationLoader __item {
position: absolute;
display: inline-block;
top: 0;
background-color: grey;
border-radius: 100%;
width: 45px;
height: 45px;
animation: animationLoader -bounce 2s infinite ease-in-out;
}
.animationLoader __item:last-child {
top: auto;
bottom: 0;
animation-delay: -1s;
}
@keyframes animationLoader -rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes animationLoader -bounce {
0%,
100% {
transform: scale(0);
}
50% {
transform: scale(1);
}
}
.animation_hiding .animationLoader {
transition: 0.3s opacity;
opacity: 0;
}
.animation .animationLoader {
display: none;
}
Третий этап — добавление небольшого JavaScript-кода, чтобы показывать и скрывать нашу псевдо страницу анимации загрузки. Код будет следующим:
<script>
window.onload = function () {
document.body.classList.add('animation_hiding');
window.setTimeout(function () {
document.body.classList.add('animation');
document.body.classList.remove('animation_hiding');
}, 600);
}
</script>
Анимация загрузки сайта при помощи SVG-картинки
Процесс создания такой анимации загрузки также состоит из 3-х этапов:
код HTML;
код CSS;
код JavaScript.
Только сам код будет слегка изменен.
Код HTML, который добавляется после открывающегося тега <body>:
<div class="animationLoader">
<svg class="animationLoader__image" role="img" xmlns="http://путь до SVG-картинки на вашем сайте" viewBox="0 0 512 512">
<path fill="currentColor"
d="M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z">
</path>
</svg>
</div>
Код CSS:
.animationLoader {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
background: #e0e0e0;
z-index: 1001;
}
.animationLoader __image {
position: relative;
top: 50%;
left: 50%;
width: 80px;
height: 80px;
margin-top: -45px;
margin-left: -45px;
text-align: center;
animation: animationLoader-rotate 2s infinite linear;
}
@keyframes animationLoader-rotate {
100% {
transform: rotate(360deg);
}
}
.animation _hiding . animationLoader {
transition: 0.3s opacity;
opacity: 0;
}
.animation . animationLoader {
display: none;
}
JavaScript-код будет таким же, как и в первом случае:
<script>
window.onload = function () {
document.body.classList.add('animation_hiding');
window.setTimeout(function () {
document.body.classList.add('animation');
document.body.classList.remove('animation_hiding');
}, 600);
}
</script>
Анимация загрузки страницы при помощи GIF-картинки
Алгоритм действий будет, как и в предыдущих способах, состоять из трех этапов, но уже с измененным кодом.
HTML-код:
<div class="animationLoader">
<div class="animationLoader__image"></div>
</div>
CSS-код:
.animationLoader {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
background: #fff;
z-index: 1001;
}
.animationLoader __image {
position: relative;
top: 50%;
left: 50%;
width: 74px;
height: 74px;
margin-top: -42px;
margin-left: -42px;
background: url('animationLoader .gif') no-repeat 50% 50%; /*в ссылке указываете путь до GIF-картинки, расположенной на вашем сайте*/
}
.lanimation_hiding . animationLoader {
transition: 0.3s opacity;
opacity: 0;
}
. animation . animationLoader {
display: none;
}
JavaScript-код будет точно таким же, как и в первых двух случаях.
Заключение
Анимация загрузки создается несложно. Сложнее всего ее создавать при помощи «чистого» CSS, так как нужно знать технологию применения таблиц стилей для анимации. Анимация загрузки веб-страницы нужна, чтобы скрыть «некрасивую» загрузку основного контента за ширмой из приятных глазу эффектов.
Другое
