Web Development
JBlog

Как создать каркасные загрузчики в CSS. Skeleton loader.

Rate this item
(1 Vote)

Оптимизируйте восприятие времени загрузки с помощью каркасной загрузки контента

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

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

 

1

 

Как каркасные загрузчики улучшают восприятие

Хороший пример ощутимого улучшения производительности происходит в загрузчиках Skeleton. Каркасный или как его еще называют скелетный загрузчик может выполнять роль заполнителя для информации, которая все еще загружается, помогая пользователю сосредоточиться на прогрессе, а не на времени ожидания.

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

 

2

 

Анимация

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

Работая над движениями, мы обычно должны стремиться к продолжительности где-то между 300-500 мс. Что-нибудь ниже этой продолжительности, анимация становится слишком быстрой для восприятия; большее время может показаться вялым, заставляя пользователей чувствовать, что они ждут больше, чем на самом деле. Также важно отметить, что чем сложнее и больше анимация, тем медленнее она должна быть.

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

Чтобы полностью понять, как будет работать анимация, лучше всего объяснить ее с помощью другой анимации:

 

3

 

Анимация градиента

Здесь мы анимируем градиент слева направо, начиная с внешней стороны контейнера.

  • Начальная позиция: градиент располагается вне поля зрения, при этом его правая сторона касается начала неподвижного контейнера.
    Начните с отрицательного смещения: положение градиента начинается с отрицательного значения, соответствующего его ширине. Так что, если ширина градиента равна 150px, его начальное значение будет left: -150px;.
  • Скрыть градиент: чтобы не показывать его вне контейнера, нам также нужно будет указать overflow: hidden;.
  • Сброс анимации: после завершения анимации положение градиента сбрасывается на начало.

 

Написание CSS

В HTML мы будем работать только с одним элементом-заполнителем. Вот с этим:

<div class="placeholder-item"> </div>


Вся анимация будет идти внутри ::before элемента. Это псевдоэлемент, который часто используется для добавления косметики в выбранный элемент. Подумайте о псевдоэлементе как о добавленном ключевом слове к селектору, который позволяет стилизовать определенные его части. Но прежде чем заняться этим, давайте определим некоторые стили для родителя:

.placeholder-item {
	box-shadow: 0 4px 10px 0 rgba(33, 33, 33, 0.15);
	border-radius: 4px;
	position: relative;
	overflow: hidden;
	}
	

Важные правила, определенные выше - это две последние строки. Мы разместим ::before элемент абсолютно в его контейнере, поэтому элемент-заполнитель должен иметь relative позицию и его overflow значение hidden. Это предотвратит показ градиента за пределами нашего элемента-заполнителя. Переходя к ::before псевдоэлементу:

Использование псевдоэлемента

.placeholder-loading::before {
	content: '';
	isplay: block;
	position: absolute;
	left: -150px;
	top: 0;
	height: 100%;
	width: 150px;
	background: linear-gradient(to right, transparent 0%, #E8E8E8 50%, transparent 100%);
	animation: load 1s cubic-bezier(0.4, 0.0, 0.2, 1);
}

Давайте проанализируем этот псевдоэлементный код:

Как вы можете видеть, поскольку ширина градиента составляет 150 пикселей, его начальное значение должно быть -150 пикселей слева.
Другая важная часть — это свойство background. Вы хотите перейти от прозрачного к прозрачному, чтобы идеально смешать его с фоном контейнера. Цвет градиента указан точно на 50%.
А для load анимации вам нужно изменить left свойство:

@keyframes load {
	from {
		left: -150px;
	} to {
		left: 100%;
	}
}

Все это должно привезти к следующей анимации:

 

4

 

Удачи!!!

edit Last modified on Saturday, 08 August 2020 12:27

Leave a comment