Как создать простую анимацию загрузки на чистом CSS

Поскольку анимации загрузки CSS уже поддерживаются всеми современными моделями браузеров, использование анимированного .gif для индикации загрузки страницы или ее элемента больше не требуется. Кроме того, сами .gif-изображения зачастую весят достаточно много и еще больше тормозят загрузку страницы. Этот спиннер будет работать во всех современных браузерах, в том числе в IE10 и выше. До изучения этой статьи рекомендуется ознакомиться с использования простых CSS-анимаций загрузки страницы.

Создание разметки спиннера: CSS анимация загрузки

Наш спиннер будет представлять собой простой круг, вращающийся вокруг своего собственного центра. Разметка спиннера - это всего лишь один элемент div. Наш спиннер будет псевдоэлементом :: before (вы также можете использовать :: after) нашего div.

<div class="spinner"></div>

Стили SCSS для статичного спиннера

До написания анимаций для нашего спиннера сперва просто напишем стили для него.

.spinner {
// Высота установлена для демонстрации
height: 100vh; 
position: relative;
&::before {
content: "";
height: 60px;
width: 60px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: solid 5px #eee;
border-bottom-color: #0097a7;
border-radius: 50%;
}
}

Что мы получаем:

Создан псевдоэлемент с абсолютным позиционированием. Родительский элемент получает такую же ширину и высоту, а затем псевдоэлементу добавляется border-radius: 50% чтобы из квадрата получить, собственно, круг.

Одной из границ меняем цвет на отличный от основного.

Теперь приступим к анимации спиннера:

Мы будем использовать CSS-анимацию загрузки, уже имеющуюся в CSS3 для вращения нашего спиннера.

@keyframes spinner {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
.spinner {
// Высота установлена для демонстрации
height: 100vh; 
position: relative;
opacity: 1;
transition: opacity linear 0.1s;
&::before {
content: "";
height: 60px;
width: 60px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: solid 5px #eee;
border-bottom-color: #0097a7;
border-radius: 50%;
animation: 2s linear infinite spinner;
will-change: transform;
}
}

Теперь мы добавили:

• Простой кейфрейм CSS-анимации, который вращает спиннер по кругу.
• Анимация преобразует кейфрейм так, что он целиком проигрывается в течение 2 секунд. Значение linear замедления анимации обеспечивает плавное и непрерывное вращение. Также Вы можете заметить, что кейфрейм также включает transform: translate (-50%, -50%), потому что он используется для централизованного позиционирования спиннера. Это необходимо поскольку анимация перезаписывает значения transition по умолчанию.
• Используя will-change: transform мы сообщаем браузеру, что этот элемент будет преобразован, и, следовательно, оптимизируем анимацию.
• Мы также добавили opacity и transition элементу, чтобы, когда Ваш контент будет загружен, можно было плавно скрыть спиннер.

Теперь наш CSS-спиннер готов! Осталось лишь написать для него SCSS-миксин.

Создание SCSS-миксина для спиннера загрузки контента

Целью этого миксина является создание гибкого, простого в реализации спиннера загрузки на чистом CSS. Зададим миксину три аргумента:

• $activeColor: цвет для одной границы, который отличается от остальных трех.
• $selector: псевдоэлемент, к которому будет применен спиннер.
• $time: продолжительность анимации. Сколько времени требуется, чтобы вертушка сделала один полный оборот.

@mixin loading-spinner($color: "#EF6565", $selector: "&::before", $time: 1.5s) {
@keyframes spinner {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
&.-loaded {
opacity: 0;
transition: opacity linear 0.1s;
}
#{$selector} {
content: "";
height: 60px;
width: 60px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: solid 5px #eee;
border-bottom-color: #{$color};
border-radius: 50%;
animation: 2s linear infinite spinner;
will-change: transform;
}
}
.spinner {
@include loading-spinner();
}

Таким образом мы создали простой и быстрый спиннер с анимацией загрузки контента, не прибегая к использованию JS-кода. Пользуйтесь всеми возможностями CSS и не перегружайте свою страницу!