Gif загрузки страницы: анимации загрузки GIF, SVG, APNG (загрузчики AJAX)

2 года назад

156 просмотров

правила создания скелетного экрана на сайтах и в приложениях — Дизайн на vc.ru

Перевод исследования продуктового дизайнера компании Clio Билла Чанга.

22 814 просмотров

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

Вскоре после публикации у меня состоялась интересная дискуссия с коллегами — дизайнерами и инженерами — на тему «как узнать, действительно ли эффективен скелетный экран загрузки?»

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

Скелетные экраны загрузки разных форм и размеров встречаются в интернете и приложениях — везде, где люди вынуждены ждать, пока идёт загрузка.

Но действительно ли они работают?

Вкратце о результатах моего исследования

• Скелетный экран (в качестве экрана заставки) используется, чтобы дать понять пользователю, что страница загружается. В сравнении с пустым экраном и спиннером он создаёт иллюзию более быстрой загрузки страниц.
• Скелетные экраны загрузки не должны блокировать постепенную загрузку контента (когда данные полностью загружены, контент должен немедленно появляться). Подавляющее большинство скелетных экранов, используемых сегодня, на самом деле просто заставки, а не скелетные экраны, описанные Люком Вроблевски (родоначальник скелетных экранов).
• При проектировании скелетных экранов лучше использовать анимацию, это уменьшает воспринимаемую продолжительность загрузки.
• Скелетные экраны с движением слева направо (например, волновая или мерцающая анимация, наподобие используемых в Facebook или Google), воспринимаются более короткими по продолжительности, чем импульсные (переход из прозрачного состояния в непрозрачное).
• Скелетные экраны с медленной и размеренной скоростью движения воспринимаются как более короткие по продолжительности, чем экраны с быстрой скоростью движения.
• Результаты этого исследования не позволяют нам сделать окончательные выводы, но дают подсказки о том, как лучше проектировать паттерны загрузки.

Обзор скелетных экранов

Люк Вроблевски впервые использовал термин «скелетный экран» в статье, где говорится о том, что дизайнеры отказываются от использования спиннеров (анимированные графические элементы, вращающиеся вокруг центральной точки) в пользу визуальных плейсхолдеров.

Он ссылался на свою работу над нативным мобильным приложением Polar, в частности, на чрезмерное время ожидания при загрузке веб-страниц приложения, на которое жаловались пользователи. Первоначально для того, чтобы обозначить процесс загрузки страницы, использовались спиннеры.

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

Люк Вроблевски

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

Вроблевски представил эти визуальные плейсхолдеры в виде светло-серых прямоугольников, которые мгновенно появлялись там, где контент ещё не был загружен.

Переключение внимания пользователя от фактического процесса загрузки к загружаемому контенту — это отвлекающий маневр. Но какое воздействие он оказывает на пользователей?

Эксплицитные парадигмы загрузки

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

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

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

Что такое скелетный экран

Скелетные экраны — это пустые страницы, которые постепенно заполняются контентом, например, текстом и изображениями.

Фигуры, заполненные серым или нейтральным цветом (их обычно называют плейсхолдерами), появляются мгновенно, как только пользователь начал взаимодействие с призывом к действию или ссылкой. Затем плейсхолдеры — «кости» скелетного экрана — заменяются фактическим контентом сайта. Задача скелетных экранов — создать иллюзию мгновенной загрузки.

Примеры скелетных экранов

Facebook

Загрузка новостной ленты Facebook в 2018 году

LinkedIn

Загрузка главной страницы LinkedIn в 2018 году

Google Drive

Частично загруженная страница Google Drive в 2018 году. Обратите внимание на то, как скелетные экраны используются в слотах быстрого доступа

YouTube

Загрузка домашней страницы YouTube в 2018 году

Общие черты

Во всех приведенных выше примерах используются общие элементы визуального дизайна:

• Используется движение внутри объектов скелетного экрана.
• Объекты скелетного экрана выкрашены в светло-серый или нейтральный цвет.

Есть и различие — на Facebook, Linkedin и YouTube скелетные экраны выступают в качестве экранов загрузки, тогда как Google Drive использует спиннер для загрузки основной структуры папок, а объекты скелетного экрана только для слотов быстрого доступа.

Этот мой стенд с призывом «Помогите мне с исследованием!» в центре Ванкувера, Британская Колумбия, Канада

Исследование

Моё исследование состоит из двух основных фаз.

Первая противопоставляет общую парадигму загрузки (спиннер) скелетному экрану и более подробно описана в разделе «Парадигма против парадигмы».

Вторая исследует вариации скелетных экранов, измеряя эффективность каждой из них.

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

Предыдущие исследования

В 2017 году было проведено небольшое исследование, которое оценило эффективность скелетных экранов в создании иллюзии меньшего воспринимаемого времени ожидания. Агенство Viget выступило против нашумевшей ценности скелетных экранов в сравнении со спиннерами и пустым экраном загрузки (спойлер: скелетные экраны показали худший результат с точки зрения воспринимаемой продолжительности времени).

Тем не менее, даже имея на руках результаты исследования Viget, я хотел подробнее изучить данную тему.

Принципы тестирования

Я хотел протестировать скелетные экраны на мобильном устройстве, потому что оно лучше всего подходит для создания «полусфокусированного» состояния, в котором большинство из нас находятся, когда мы используем смартфон (половина внимания сосредоточена на устройстве, а вторая половина сосредоточена на пересечении улицы или поедании бейгла).

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

Во второй части исследования я пригласил участников с сайта UserTesting.com (к сожалению, из-за изменившейся погоды становилось всё труднее сидеть и поджидать участников исследования на улице).

Исследование: парадигма против парадигмы

Гипотеза: отображение скелетного экрана уменьшит воспринимаемое участниками время ожидания.

Методология

Обдумывая, как лучше взаимодействовать с участниками, я понял, что предыдущие тесты, которые я пытался провести, чтобы опровергнуть эту гипотезу, изобиловали проблемами:

• я перебивал участника теста вопросами во время тестирования;
• вопросы, которые я задавал, были утомительными, поскольку я провёл двенадцать индивидуальных тестов с каждым участником и должен был задавать одни и те же вопросы после каждого «раунда»;
• порядок, в котором я показывал каждую парадигму загрузки и продолжительность, я рандомизировал вручную, это сделало процесс утомительным.

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

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

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

Я подошел на улице к 126 уникальным участникам теста из разных слоев общества, в основном не имеющих образования в сфере технологий. Размер выборки составил 80 человек, все имели опыт работы с мобильными устройствами.

Приложение для тестирования

Приложение было написано на языке программирования Swift и загружено на iPhone 7 (по моему мнению, это устройство, которое, комфортно держать в руках большинству людей).

Когда участник завершал тест, результаты отправлялись в базу данных Firebase, откуда я мог ежедневно выводить результаты в файл CSV (данные, разделённые запятыми) для анализа.

Я просил участников прочитать инструкции, представленные в приложении, и не спешить с выполнением задач. Прежде чем начать тесты, я провёл участникам очень быстрый инструктаж, чтобы они знали, чего ожидать. Вот его содержание:

• Нажать на кнопку, чтобы начать тест.
• Подождать, наблюдая за скелетным экраном, спиннером или пустым экраном.
• Посмотреть на загруженную страницу.
• Ответить на два вопроса: сколько секунд заняла загрузка страницы, какие остались ощущения от ожидания загрузки страницы.
• Повторить этот тест ещё восемь раз (всего девять тестов за сеанс)
• В конце я задал вопросы, чтобы собрать более подробную информацию. Обычно я начинал разговор, спрашивая: «Сегодня вы видели разные способы загрузки мобильной страницы. Какой вам понравился больше всего?»

Чтобы минимизировать любую предвзятость, когда наблюдение одного паттерна перед другим может исказить воспринимаемую продолжительность, приложение автоматически рандомизировало порядок, в котором появлялись разные варианты загрузки.

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

Было проведено девять тестов, по три разных продолжительности для каждой из трёх парадигм загрузки. Строчки: пустая страница, скелетная загрузка, спиннер. Столбцы: (реальная продолжительность) 1,5 секунды, 5,5 секунды, 10,5 секунд

Скриншот тестируемого приложения Sketch

Результаты

При сравнительном тестировании скелетных экранов, спиннеров и пустых страниц скелетные экраны показали лучшие результаты с точки зрения воспринимаемой продолжительности (таблица ниже с кратким изложением средних результатов теста с размером выборки 80 человек).

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

Результаты измерения воспринимаемой продолжительности (как долго участник ощущал ожидание)

Результаты измерения эмоциональной реакции (ощущения участника после просмотра метода загрузки)

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

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

После просмотра каждой комбинации продолжительности и способа загрузки участникам было предложено оценить свои ощущения с помощью эмодзи. Надпись на экране: «Как вы себя чувствовали?»

Анализ и интерпретация

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

В некоторых случаях скелетный экран эквивалентен спиннеру (например, в тестах длительностью 5,5 секунд) и превосходство скелетных экранов над спиннерами незначительно.

Можно предположить, что разные методы представления спиннера могут существенно повлиять на результаты. В наших тестах я использовал, как я думал, стандартный и наиболее нативный для платформы (в этом случае iOS) спиннер.

В обоих измерениях (воспринимаемая производительность и эмоциональное воздействие) любой индикатор загрузки превосходит пустой экран.

Исследование: разные вариации скелетного экрана

Гипотеза: использование скелетного экрана уменьшит воспринимаемое участниками время ожидания загрузки.

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

Я выдвинул её, опираясь на исследование 2010 года (в том исследовании индикаторы состояния оказались лучше с точки зрения воспринимаемой продолжительности ожидания).

Методология

Чтобы определить эффективность разных вариантов визуального представления скелетных экранов, я потратил время на поиск самых популярных вариантов, используемых сегодня на рынке. Вот они:

• Статические плейсхолдеры.
• Импульсные плейсхолдеры (переход объектов скелетного экрана из прозрачного состояния в непрозрачное, медленное перемещение туда-сюда).
• Волновая (или мерцающая) анимация (перемещение справа налево или наоборот), анимация, наложенная поверх плейсхолдеров.

Когда погода ухудшилась (вначале я проводил тестирование на улице в центре Ванкувера, Британская Колумбия), я обратился к 80 уникальным пользователям мобильных устройств на сайте UserTesting.com

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

Участникам была показана одна презентация, затем сразу другая. Порядок, в котором я показывал каждый вариант скелетного экрана, менялся в каждом представленном наборе.

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

Участникам не сказали, что продолжительность каждого примера, который они видели, была одинаковой (пять секунд). После просмотра двух методов презентации я спрашивал участника: «Какая из двух загрузок страницы, которые вы наблюдали, была быстрее?»

Тесты

Вот порядок тестов, которые я провёл:

• Я начал с тестирования статических и импульсных скелетных экранов, чтобы определить, повлияло ли движение (или его отсутствие) на восприятие пользователя.
• Затем я сравнил импульсную и волновую (или мерцающую) анимации.
• В третьем тесте я сравнил быстрые волновые переходы и медленную и размеренную волновую анимацию.
• Я сравнил движение слева направо и движение справа налево.

Пример загрузки с импульсным скелетным экраном

Пример медленной и устойчивой волновой анимации (также известной как мерцание)

Результаты

Статические и анимированные скелетные экраны

60% участников теста ответили, что анимированные скелетные экраны загрузились быстрее.

Размер выборки: 20 уникальных участников.

Импульсная анимация и волновая анимация

65% участников теста ответили, что волновая анимация загрузилась быстрее импульсной.

Размер выборки: 20 уникальных участников.

Быстрая и медленная и размеренная волновая анимация

60% участников теста ответили, что медленная волновая анимация короче во времени.

Размер выборки: 20 уникальных участников.

Волновая анимация слева направо и справа налево

68% участников теста ответили, что волновая анимация слева направо короче во времени.

Размер выборки: 20 уникальных участников.

Анализ и интерпретация

Результаты этой группы тестов показательные, но не окончательные.

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

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

Какие скелетные экраны лучше

С правильно настроенным движением

Хотя необходимо дальнейшее изучение эффективности скелетных экранов, исследование предоставило несколько подсказок, как сделать скелетные экраны максимально эффективными:

• Сделать выбор в пользу волновой, а не импульсной анимации (или мерцания, подобно той, которая используется в Facebook).
• Движение не должно быть слишком быстрым, чтобы не привлекать внимание к объектам скелетного экрана. Лучше сделать его медленным и размеренным (как в приложении Google для iOS).
• Стоит выбрать анимацию, которая перемещается слева направо (было бы интересно посмотреть, как этот паттерн воспримут в культуре чтения справа налево).

Используйте доминирующие цвета

Использование скелетных объектов на основе доминантных цветов — уникальный метод обеспечения будущего контекста для объектов, которые загружаются. «Google Картинки», Pinterest используют этот шаблон.

Поиск «Google Картинки» использует плейсхолдеры с доминантными цветами

Помните, скелетные экраны — это не экраны-заставки

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

При проектировании скелетных загрузок старайтесь постепенно загружать контент, заменяя объекты-плейсхолдеры скелета контентом, как только он станет доступным. Люк Вроблевски называет это «постепенной загрузкой контента».

В будущих исследованиях следует сравнить истинный постепенно загружаемый скелетный экран с другими индикаторами загрузки, при этом используя больший размер выборки.

Почему я решил написать эту статью

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

Как представитель поколения, которому приходилось вставлять тринадцать дискет для установки Windows 95, вы можете подумать, что LTE и оптоволоконные соединения могут заставить меня ностальгировать по более простым временам, когда я мог сходить на кухню за пирогом, пока загрузится страница моего любимого сайта Geocities со всеми GIF-файлами.

Но, увы, нет.

Я так же нетерпелив, как подростки в автобусе, жалующиеся на загрузку контента Instagram со скоростью 12 Мбит в секунду. Меня коробит, когда анимация мобильной навигации меньше 30 кадров в секунду.

Я задаюсь вопросом, почему платёжному терминалу в продуктовом магазине требуется две секунды для загрузки, и мне приходится ждать, прежде чем я смогу нажать на свои часы, чтобы заплатить. Наш мир и общество теперь движутся быстрее, чем большинство из нас может воспринимать.

Понимание того, как люди воспринимают время в контексте темпов развития технологий вокруг нас — поучительный опыт. Как сказал Питер Конрад: «Современность — это ускорение времени». Исходя из личных наблюдений, истина этого утверждения кажется очевидной.

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

Использование анимации загрузки на веб-сайтах и ​​в приложениях: примеры и фрагменты для использования | Александр Гильманов

Для чего нужна анимация загрузки на сайте?

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

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

Один из способов сделать это — добавить привлекательную анимацию загрузки или загрузку gif на сайт, чтобы пользователи развлекались, пока они ждут загрузки остальной части сайта.

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

Давайте посмотрим на эти интересные GIF-анимации загрузки.

Мы нашли одни из лучших анимаций загрузки и загрузки gif, и вот они:

Это отличный пример GIF-изображения экрана загрузки, которое привлекает ваше внимание достаточно долго, чтобы загрузился остальной контент. На нем изображен вращающийся круг, окруженный таинственным дымом, на который невозможно не обратить внимание. И на самом деле все, что нужно, — это мгновение…

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

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

Этот анимированный gif-файл загрузчика хорош по двум причинам. Заметка «Спасибо за терпение» помогает наладить общение с пользователем и получить определенный уровень понимания. Прелоадер в виде песочных часов, наоборот, привлекает внимание пользователей и делает их ожидание более комфортным.

Лучшие вещи часто самые простые, и то же правило применяется к анимации загрузки CSS. Хотя кому-то это может показаться скучным, на самом деле он идеален в своей простоте. И самое лучшее в этом то, что вы не можете перестать смотреть на это.

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

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

Шаблон вложения всегда является хорошим выбором, когда дело доходит до загрузки анимированных GIF-файлов. Добавьте в микс 3D-эффект, и вы получите идеальную анимацию загрузки, которую стоит создать!

При разработке анимации загрузки всегда думайте о целевой аудитории и о том, что они хотели бы видеть. Этот веб-сайт отлично справился с этой задачей, объединив несколько вещей, связанных с Рождеством, и создав GIF-файл с предварительным загрузчиком, идеально подходящий для онлайн-курсов, ориентированных на детей. Вызывать эмоциональный отклик у ваших пользователей всегда хорошая идея, если вы знаете, как это сделать правильно.

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

Этот GIF-файл с полосой загрузки не только служит своей цели, но и действительно крут и моден. Он был разработан для мобильного приложения/веб-сайта Android/iOS и сочетает в себе вращающийся земной шар с цветовыми контрастами, которые создают интересный научно-фантастический визуальный эффект.

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

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

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

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

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

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

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

Помните старую школьную заставку Windows? Этот полосатый фрактальный холст с иконкой загрузки действительно немного похож на это. Он использует много JavaScript, и хотя он называется элементом холста, на самом деле он не использует элемент холста на странице.

На самом деле причина, по которой он так называется, заключается в том, что он работает на Sketch. js, который является библиотекой естественного холста. Так что, если у вас нет проблем с тем, чтобы немного поиграть с JavaScript на вашем сайте, эта анимация загрузки — один из лучших вариантов для вас.

Загрузчики OuroboroCSS, созданные Джеффри Крофтом, основаны на чистом CSS и работают с повторяющимся циклом анимации, который создает иллюзию исчезновения в форме.

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

При разработке этого пользовательского загрузчика в виде термометра его создатель, Хьюго Жиродель, действительно раздвинул границы CSS, запустив анимацию загрузки, которая переливается разными цветами снизу вверх. Анимации — это чистый CSS, и есть только 3 HTML-элемента, вложенных друг в друга.

Загрузчик Three.js от Леннарта Хейса — настолько классная загрузочная гифка, что мы просто обязаны добавить ее в список. Он использует бесплатную 3D-библиотеку Three.js для создания вращающегося куба на небольшой поверхности, на которую невозможно не смотреть.

Анимация управляется с помощью JavaScript и рендеринга WebGL. Поскольку 3D-дизайн является одной из самых крутых новых тенденций в веб-дизайне, добавление некоторых 3D-элементов в анимацию загрузки всегда является хорошей идеей.

Этот впечатляющий загрузчик кругов холста полностью построен на элементе холста HTML с использованием вызовов ctx и JavaScript для создания этого удивительного и привлекательного эффекта с нуля. Это не круг загрузчика, который можно было бы легко встроить в любой веб-сайт, но вы должны признать, что на это стоило посмотреть.

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

Если вы ищете загрузчик на чистом CSS, то эта классная и забавная анимация загрузки CSS, безусловно, заслуживает вашего внимания. Он прост в настройке, привлекателен и приятен для глаз. Еще одним большим плюсом является то, что его можно легко встроить в любой веб-сайт и выполнять свою функцию отличной анимации загрузки. Формы точек и анимация выполняются с помощью CSS, и JavaScript не требуется.

Этот скользящий квадратный загрузчик делает ожидание немного менее неприятным, так как заставляет ваш взгляд двигаться вместе с квадратами. Отличное решение для компаний, которые продают электронику или игры в Интернете, чтобы поддерживать интерес посетителей к веб-сайту.

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

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

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

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

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

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

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

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

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

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

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

Без JS, кроссбраузерность, минимальный код. 20 строк CSS и 4 строки сгенерированного SVG.

Не работает в Edge из-за отсутствия поддержки calc() в качестве значения задержки анимации.

Удивительный загрузчик флипов, сделанный на CSS. Цвета полностью логичны на обороте. Любые цвета могут быть установлены легко.

Простые загрузочные счетчики, анимированные с помощью CSS. Смотрите демо. SpinKit использует анимацию CSS с аппаратным ускорением (перевод и непрозрачность) для создания плавных и легко настраиваемых анимаций.

Коллекция из 12 маленьких элегантных спиннеров на чистом css для анимации загрузки вашего сайта.