Gif прелоадер для сайта: Анимированный текст анимации загрузки GIF, SVG, APNG (загрузчики AJAX)

5 лет назад

256 просмотров

Что такое троббер и зачем он нужен

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

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

Тробберы почти всегда присутствуют на вкладках браузеров

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

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

Зачем нужен

Впервые троббер использовали в начале 1990-х годов в веб-браузере NCSA Mosaic, который стал основой для Internet Explorer. 

Разработчики придумали пульсирующий индикатор активности, который сообщал пользователю: «Все работает! Браузер не завис, а страницы загружаются». Позже идея была заимствована для других IT-продуктов. 

Троббер в Internet Explorer

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

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

Пример предзагрузки страницы сайта. Контент не виден до полной загрузки страницы

Также троббер применяют в следующих целях: 

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

Это троббер в онлайн-сервисе по редактированию видеороликов Clideo. Пока программа сжимает видео, пользователь видит забавные надписи

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

Где используют

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

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

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

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

В момент загрузки сайт полностью скрыт под картинкой с троббером

Варианты представления

При первоначальном использовании в веб-браузерах тробберы имели форму анимированного логотипа программы. Использование лого в качестве анимации загрузки популярно до сих пор.

Практически любой логотип можно превратить в троббер

Позднее появился  вращающийся кольцеобразный значок — спиннер. Он популярен до сих пор и используется в разных вариациях.

Вращающееся кольцо — это классика тробберов

Вращающийся круг визуализируют по-разному в зависимости от айдентики компании и дизайна сайта.

Спиннеру можно придать любую форму. Источник

Основное требование к анимации загрузки — её динамичность в процессе выполнения действия.

Мерцающие точки в форме круга — один из самых частых вариантов прелоадера

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

Тробберы применяют и в командной строке. Источник

Это самые распространенные варианты. Фактически в качестве предзагрузчика можно использовать любое изображение в формате анимированного GIF или анимации CSS (код для описания визуального представления).

Различные варианты тробберов предлагают на сайте для дизайнеров Dribbble

А это вариации дизайнов на Behance

Как добавить троббер на сайт без знания кода

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

Специальные сервисы

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

Например: 

• Конструктор прелоадеров от Hello-site.ru; 
• Codepen;
• Loading.io; 
• Svgator;
• CSS Loader Generator. 

После создания анимации в сервисе необходимо скопировать полученный HTML или CSS код.

Инструкция по добавлению прелоадера

Полученный HTML-код нужно добавить в код сайта сразу после открывающегося тега <body> перед закрывающимся тегом </body>.  При использовании CSS кода его можно вставить в HTML-код страницы в том месте, где вы хотите видеть анимацию загрузки.  

Вставьте готовый код, и троббер будет работать на вашем сайте

Плагины

Для сайтов на WordPress используют специальные плагины. Например, LoftLoader, WP Smart Preloader или «Прелоадер». После установки и активации плагина достаточно выбрать дизайн и настроить элемент.

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

Встроенные функции конструктора сайтов

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

У Tilda есть такой элемент, как микроанимация. Использовать его просто — нужно на самый верх страницы добавить блок «Т228» из категории «Другое».

В Tilda можно настроить отображение загрузочной анимации

Главные мысли

дизайнов, тем, шаблонов и загружаемых графических элементов Loader Gif на Dribbble

1. Просмотр цикла обработки

   Цикл обработки

2. Просмотр загрузчиков

   Погрузчики

3. Просмотр жидкостной геометрии Загрузчики

   Жидкостная геометрия Загрузчики

4. Посмотреть цепочку градиентов

   Градиентная цепь

5. View Dharma — зацикленная анимация значка

   Дхарма — зацикленная анимация значка

6. Посмотреть концепцию спирального предварительного загрузчика

   Концепция спирального предварительного загрузчика

7. Посмотреть счетчик

   Спиннер

8. Посмотреть погрузчик XL

   Погрузчик XL

9. Просмотр лабораторных загрузчиков

   Лабораторные загрузчики

10. Посмотреть загрузчик

    Погрузчик

11. Посмотреть загрузчик UberEats

    Загрузчик UberEats

12. Просмотр 3D-загрузчика

    3D-загрузчик

13. Просмотреть геномику дроплетов — веб-загрузчик

    Droplet Genomics — Web Preloader

14. Посмотреть падающие точки

    Падающие точки

15. Посмотреть исследование обработки анимации [VR]

    Обработка исследования анимации [VR]

16. Посмотреть критика — анимация логотипа

    Критик — Анимация логотипа

17. Посмотреть квадратный погрузчик

    Квадратный погрузчик

18. Просмотр предварительного загрузчика

    Предварительный загрузчик

19. Посмотреть Загрузка XXI

    Загрузка XXI

20. Посмотреть анимацию логотипа Apple

    Анимация логотипа Apple

21. Посмотреть анимацию логотипа Appcar

    Анимация логотипа Appcar
22. 2″ data-ad-data=»» data-boost-id=»» data-is-boost-fallback=»»>

    Посмотреть загрузчик

    Погрузчик

23. Посмотреть анимацию e Loader

    e Анимация загрузчика

24. Просмотр цикла 3D-иконок

    Цикл 3D-значков

Зарегистрируйтесь, чтобы продолжить или войдите на сайт

Идет загрузка еще…

Топ-30 самых увлекательных загрузчиков для вашего сайта

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

Что такое предварительный загрузчик?

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

Почему так важен предварительный загрузчик?

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

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

Каким должен быть хороший прелоадер?

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

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

По этой причине мы составили и отредактировали следующий список ярких, забавных и уникальных примеров прелоадера (включая некоторые из собственных дизайнов SteelKiwi), чтобы помочь вам и вашей команде дизайнеров найти вдохновение!

30 лучших дизайнов предзагрузчика

Sliding Square LoaderView

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

DotsLoaderView

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

Простой загрузчик

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

Устройство для загрузки птиц

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

LittlePin Spinner

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

Нет погрузчиков в перерыве матча Петрик

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

Качающийся погрузчик с обезьяной Hello Dribbble

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

Загрузчик Cooper

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

Загрузка…

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

Загрузчик для пинг-понга

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

Загрузчик приложения SurveyPlanet

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

Загрузчик Blurred Gear

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

Загрузчик лестниц CSS

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

Ручка для загрузки

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

Загрузчик CSS

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

Vivid CSS3 Spinner

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

Экран загрузки Prism

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

Погрузчик

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

Перенаправление загрузчика

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

Preloader Animation

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

Приготовление блинов

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

Простой загрузчик

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

Анимация загрузчика

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

Анимация руки Загрузка

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

Предварительный загрузчик дерева

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

Предварительный загрузчик для путешествий

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

Вращающаяся головка

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

Величайшие примеры анимации предварительной загрузки страницы

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

1. W. Brett Wilson

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

2. Креативный круиз

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

3. Opencontinents

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

4. Kokopako

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

5. McWhopper.com

Веб-сайт McWhopper был создан для продвижения специального предложения от McDonald’s и Burger King. Предварительный загрузчик веб-сайта очень привлекает новых посетителей своим анимированным бургером, который прыгает, как на батуте, давая возможность увидеть все ингредиенты и делая ожидание более приятным. Кроме того, прелоадер использует текст и хорошо вписывается в общий дизайн сайта.

Дополнительные ресурсы загрузчика

Мы надеемся, что этот список вдохновит вас на разработку отличного дизайна загрузчика для вашего проекта!

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