{"id":14289,"url":"\/distributions\/14289\/click?bit=1&hash=892464fe46102746d8d05914a41d0a54b0756f476a912469a2c12e8168d8a933","title":"\u041e\u0434\u0438\u043d \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u043b \u043f\u0440\u043e\u0434\u0430\u0436\u0438 \u043d\u0430 5%, \u0430 \u0441\u0440\u0435\u0434\u043d\u0438\u0439 \u0447\u0435\u043a \u2014 \u043d\u0430 20%","buttonText":"","imageUuid":""}

Никита Семёнов

13 мар в 13:30 13 мар

26 референсов лоадеров: логотип, цифры, тематика, эмоджи и эффект слайдера

Каждый день я тренирую насмотренность в UX. Мощные, необычные и редкие находки публикую в телеграмм-канале.

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

База

Начнем с стандартных решений. Обычный лоадер у Тинькофф:

Линия у Золотого Яблока:

Скелетон у Яндекс.Практикума:

Просто текст «Запускаем, один момент...» у Профи:

Продвинутые решения

Лоадер в виде логотипа

Zarina:

Trello:

Внимание на сам логотип в левый верхний угол

Miro:

Specials:

Slack:

Bork:

Tripadvisor:

Яндекс Путешествия:

Лоадер в виде цифр

Flipaclip:

Сайт Дениса Абдуллина:

Тематический лоадер

[{"title":"\u0420\u0430\u0437\u043d\u044b\u0435 \u0438\u043a\u043e\u043d\u043a\u0438 \u0432 \u0432\u0438\u0434\u0435 \u043b\u043e\u0430\u0434\u0435\u0440\u0430 \u043d\u0430 \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435","image":{"type":"image","data":{"uuid":"f4077144-e97a-57a3-b8aa-f030388276f3","width":1296,"height":838,"size":324297,"type":"gif","color":"23232b","hash":"","external_service":[],"duration":4.666667}}},{"title":"\u041f\u043e\u0441\u043b\u0435\u0434\u043d\u044f\u044f \u0438\u043a\u043e\u043d\u043a\u0430 \u043f\u043e\u0434\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0434 \u0442\u0435\u043c\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c","image":{"type":"image","data":{"uuid":"9fa5b142-8868-5e09-bf50-5cee984fe31f","width":1296,"height":838,"size":2313344,"type":"gif","color":"040404","hash":"","external_service":[],"duration":24.366667}}}]

Dropbox: