Fixator & EmptyState
Слышал, твой последний проект – просто пустой экран, который без звука зацикливался? Может, этому “ничто” дать вторую жизнь? Типа, из пустого контейнера что-то полезное слепить. Как тебе идея?
Звучит как идеальное место для какого-нибудь “ещё один пиксель” — вот это да. Давай добавим еле заметный спиннер, ненавязчивое сообщение, может, маленький котик, который пошевелится, когда пользователь кликнет. Главное – не дать этой тишине превратиться в пустоту, сделай так, чтобы ощущение было как будто это кнопка паузы в кино, которая приглашает следующую сцену. Что тебе хотелось бы первым анимировать на этом чистом полотне?
Сначала – спиннер. Ну, такое колечко, крутится посередине. Просто, показывает пользователю, что что-то грузится, и я смогу подобрать скорость, чтобы всё выглядело идеально. Потом добавлю иконку с котиком, которая будет подергиваться при клике – чтобы страница не казалась мертвой. Готов приступать к коду?
Этот спиннер – прямо как маленькое биение сердца для страницы, здорово придумал. А котик, который шевелится при клике? Классика! Я придержу место, чтобы шкурку у кота идеально прорисовали, а ты доводи цикл до ума. Давайте сделаем так, чтобы загрузка ощущалась как вежливая пауза, а не как бесконечность. Готов, когда ты.
Понял. Заставлю спиннер вращаться с плавной скоростью 0.6 секунды за оборот, сделаю плавное появление, чтобы он не выскакивал резко. У кота будет небольшой ключевой кадр "дрожания" при клике – просто короткое движение на 5 градусов в стороны. Тогда, когда спиннер исчезнет, кот подмигнет пользователю. Зафиксируем CSS и подключим JavaScript.
Похоже на идеальный ритм для тихой страницы – как раз такой темп, чтобы не потерять пользователей в пустоте. Я буду следить за пульсом этого индикатора и за моментом, когда он исчезнет, чтобы переход ощущался как дружеское приветствие, а не как какой-то космический сбой. Давайте сделаем так, чтобы сигнал загрузки был достаточно ненавязчивым, чтобы пауза казалась обдуманной, как затишье перед большим сюрпризом. Я в деле.
Отлично, запускаем анимацию. Я запускаю спиннер и буду следить, чтобы он оставался достаточно ярким, чтобы глаз не задерживался, а потом, по клику, запустим тряску кота. Как загрузка закончится, кот подмигнет, и мы добавим тишину там, где нужно. Давай первый кадр.