Сегодня мы создадим набор оригинальных эффектов загрузки страницы. Основная задача – показать накрывающий слой с интересной анимацией формы, пока загружается новое содержимое.

Демонстрация работы – Скачать исходный код

Если вы были на сайтах с отличных дизайном Nicolas Zezuka и Active Theory, то могли заметить интересную анимацию загрузки, которая происходит перед тем, как будет показано новое содержимое. Этот вид стиля загрузки довольно популярен сейчас, и мы хотели бы вдохновить вас на эксперименты. Основная задача — анимировать форму накрывающего слоя в окне браузера и показать индикатор активности. Когда новое содержимое будет загружено, произойдет обратная анимация формы накрывающего слоя, чтобы показать страницу. Мы используем анимированные SVG с Snap.svg для эффектов, так как это позволит  создать сложные формы и интересные перетекающие переходы.

Пожалуйста, обратите внимание на то, что эти примеры служат только для вдохновения. Мы не использовали запасных вариантов, и мы только изображаем динамическую загрузку нового содержания. Также обратите внимание, что мы анимируем SVG и псевдоэлементы, а это может отображаться неправильно в некоторых браузерах.

Мы показываем накрывающий слой загрузки, определяя анимацию на пути, который мы указали в следующем SVG:

<div id="loader" data-opening="M 0,0 80,-10 80,60 0,70 0,0" data-closing="M 0,-10 80,-20 80,-10 0,0 0,-10">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 80 60" preserveAspectRatio="none">
<path d="M 0,70 80,60 80,80 0,80 0,70"/>
</svg>
</div><!-- /накрывающий слой загрузки -->

Мы указываем изначальный путь, который не видим в окне браузера в SVG, и открывающий и закрывающий пути в признаках данных блока pageload-overlay. Как Вы видите, мы используем маленький viewBox, но растягиваем изображение до 100% ширины и высоты окна, не сохраняя пропорций. Если мы не определим закрывающий путь, то произойдет обратная анимация по изначальному пути.

Заметьте, что можно добавить больше, чем один путь, разделив их точкой с запятой, что позволит воспроизвести поэтапную анимацию SVG изображения, как в первом примере.

Мы задаем блоку накрывающего слоя фиксированное положение, закрывающее всю страницу, и используем индикатор загрузки, сделанный с помощью чистого CSS, задавая стили псевдоэлементам :before и :after блока.

.pageload-overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
visibility: hidden;
}

.pageload-overlay.show {
visibility: visible;
}

.pageload-overlay svg {
: absolute;
: 0;
: 0;
}
.pageload-overlay svg path {
fill: #fff;
}

Мы используем здесь свойство видимости, потому что использование фиксированного позиционирования с событиями указателя не на самом SVG вызывает проблемы в мобильных версиях, так что мы вместо этого позиционируем и настраиваем родительский блок.

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

width="100%" height="100%" viewBox="0 0 80 60" preserveAspectRatio="xMidYMid slice"

Использование свойства slice сохранит пропорции, смасштабировав изображение, так что все окно браузера будет закрыто viewBox.

Мы создали только несколько эффектов, но, как вы видите, возможности бесконечны.

Мы надеемся, вам понравились эти эффекты, и они вдохновят вас.

Демонстрация работы – Скачать исходный код

Автор урока Mary Lou

Перевод — Дежурка

Смотрите также:

• Создание целевой страницы для веб-сайта StartupGiraffe
• Создание плоских «хлебных крошек» с использованием CSS
• Создание подсвечивающихся блоков с использованием CSS3