Индикатор загрузки gif: анимации загрузки GIF, SVG, APNG (загрузчики AJAX)

Содержание

asp.net mvc — Индикатор процесса в веб приложении

Вопрос задан 6 лет 4 месяца назад

Изменён 6 лет 4 месяца назад

Просмотрен 318 раз

Пытаюсь сделать индикатор процесса в веб приложении (некий progressbar).

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

Пытался я сделать вот так, но ничего не получилось.

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

За примеры и туториалы — отдельное спасибо.

asp.net-mvc

Вы можете использовать Ajax.BeginForm (Примитивный пример тут), если возможно частичное обновление страницы без полной перезагрузки. LoadingElementId как раз отвечает за автоматическое отображение индикатора на протяжении выполнения метода. Достаточно только создать div с элементом анимации, а скрытие и отображение осуществляются автоматически.

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

@using (Ajax.BeginForm("Action", "Controller", new AjaxOptions
{
    HttpMethod = "Get",
    InsertionMode = InsertionMode.Replace,
    UpdateTargetId = "target",
    LoadingElementId = "loader"
}))
{
    /* Область, которая будет получать обновления */
    <div>
        @Html.
  Partial("_Index")
    </div>
    /* Элемент-анимация загрузки */
    <div>
        <img src="@Url.Content("~/Content/Images/loading.gif")" alt="" />
        Ваш запрос выполняется...
    </div>
}

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Круговой индикатор загрузки в gif формате • фриланс-работа для специалиста • категория Дизайн интерфейсов ≡ Заказчик Артем Волынский

5 из 5

проект завершен

публикация
прием ставок
утверждение условий
выполнение проекта
проект завершен

Для сайта creativedigital.

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

Общее представление об анимации: https://i.stack.imgur.com/7VozH.gif (только анимация заполнения)

Как должно выглядеть: http://prnt.sc/edv7hn

Круговой индикатор загрузки в gif формате

Качество

Профессионализм

Стоимость

Контактность

Сроки

Все прошло отлично, нарекани нет. Пошел на встречу даже тогда, когда не должен был.

Отзыв фрилансера о сотрудничестве с Артемом Волынским

Круговой индикатор загрузки в gif формате

Оплата

Постановка задачи

Четкость требований

Контактность

Все отлично: четкое ТЗ, клиент всегда на связи, своевременная оплата в полном объеме.
Буду рад помочь снова.
_
e-mail: [email protected]
tel. / viber / telegram: +38 (066) 039-13-09

Євген Гординський

Опубликовать похожий проект

Заказчик не желает делать предоплату? Оплата через Сейф поможет избежать возможного мошенничества.

Ставки 4

дата онлайн рейтинг стоимость время выполнения

2 дня500 UAH
2 дня500 UAH
Готова выполнить ваш заказ. Перед анимированием будет предложено пару вариантов оформления.
фрилансер больше не работает на сервисе
1 день500 RUB
1 день500 RUB
Подробно ознакомился с заданием .
Могу в точности выполнить .
Все будет сделано как требуется , плавно и красиво .
Пишите -обсудим
775″ data-days=»1″ data-lastactivity=»1674817991″>
10022
487 0

Победившая ставка1 день500 RUB
Євген Гординський
Победившая ставка1 день500 RUB
Какое время должно быть у анимации?
Нужны изображения с Freepik, Shutterstock, Depositphotos? Напишите мне, я помогу 🙂

5 лет назад
52 просмотра
GIF анимация
gif/jpg/png
Медленная загрузка | Stacks4Stacks
Также предоставляется экспериментальная поддержка медленной загрузки видео, аудио и встроенных объектов. Настройка проста; просто вложите медленно загружающийся стек в SlowLoader, и он сделает все остальное за вас. SlowLoader можно использовать как в фиксированных, так и в адаптивных макетах страниц. Вы можете безопасно использовать несколько стеков SlowLoader на одной странице; что делает его идеально подходящим для конфигураций сетки или коллажа.
Некоторый контент, такой как слайд-шоу, может быть довольно сильно поврежден во время загрузки страницы, до того, как сработает CSS или Javascript. Таким образом, SlowLoader предоставляет возможность установить фиксированную высоту при загрузке контента, чтобы скрыть все безобразие внизу! Как только контент загрузится, SlowLoader снова переключится на автоматическую высоту. Дальнейшие изменения могут быть применены к стилю с помощью пользовательского кода CSS.
SlowLoader будет безопасно работать в случаях, когда Javascript отключен в веб-браузере. Любые стеки SlowLoader, которые распечатываются или сохраняются в формате PDF, будут лишены каких-либо индикаторов выполнения.
Примеры
Вот несколько примеров стека SlowLoader. Эти три примера демонстрируют индикатор статического текста, анимированный индикатор GIF и индикатор значка Font Awesome с поддержкой сетчатки.
SlowLoader идеально подходит для использования со стопками изображений (локальными и сохраненными изображениями) и слайд-шоу, такими как FreeStyle.
Настройка
Выполните следующие действия, чтобы применить стеки SlowLoader к своим страницам:
После установки перетащите стек SlowLoader на свою страницу
Перетащите «медленный контент» в местозаполнитель, показанный в режиме редактирования
Измените любые настройки, которые вы хотите, в настройках стека SlowLoader
Индикатор загрузки можно настроить так, чтобы он отображался впереди или позади медленно загружающегося контента, используя предоставленные параметры раскрывающегося меню. Вы можете настроить положение индикатора выполнения относительно вершины стека.
SlowLoader можно настроить так, чтобы он запускался с применением фиксированной высоты, а затем менялся на «автоматическую» высоту после завершения загрузки. Это полезно для того, чтобы скрыть уродливую загрузку слайд-шоу. Высота может быть указана в пикселях, единицах измерения em или процентах.
Индикаторы Font Awesome Icon доступны для использования только в темах ThemeFlood RapidWeaver, которые поддерживают значки Font Awesome. Для настройки выберите использование текстового индикатора выполнения и введите код Font Awesome в поле ввода. Также поддерживаются анимированные иконки Font Awesome!
SlowLoader не будет предварительно загружать содержимое или ускорять его загрузку. Он просто отобразит индикатор того, что контент все еще загружается. Пользователи веб-сайта, ожидающие отображения контента, скорее всего, задержатся на несколько секунд дольше, если есть намек на то, что что-то происходит…
Использование SlowLoader с ExtraContent и FreeStyle
Поскольку эти плагины работают на основе перемещения контента из из одного места на странице в другое, необходимо убедиться, что SlowLoader вложен в перемещаемый контент. При работе с баннерами FreeStyle отключите Опция «Встроить в FreeStyle ». Вместо этого поместите стек SlowLoader и стек FreeStyle в стек ExtraContent и настройте стек ExtraContent для встраивания в баннер темы или контейнер заголовка. Таким образом, и SlowLoader, и FreeStyle останутся вместе на странице.

Вклад
Если вы найдете этот элемент стека полезным в ваших личных или коммерческих веб-проектах; рассмотрите возможность внесения небольшого вклада в текущую поддержку и обновления. Вы можете внести свой вклад в проект Stacks4Stacks разными способами и получить от этого выгоду.
Настройки конфиденциальности
Здесь вы можете изменить настройки конфиденциальности.
Используя этот веб-сайт, вы соглашаетесь с политикой конфиденциальности
Все, что вам нужно знать о загрузке анимации | by Лиза Дзюба
Спасибо Домасо за вдохновение и за этого очаровательного кота!
Благодаря огромному разнообразию отличных приложений для iOS, инструментов для macOS и хорошо продуманных веб-сайтов у людей есть определенная планка качества. По умолчанию пользователи ожидают быстрой реакции от цифровых продуктов, с которыми они работают.
Просто реальный пример: недавно мы выпустили инструмент для отправки отзывов о приложениях для iOS. Как это всегда бывает, первая версия не была идеальной и имела задержку загрузки на 2-3 секунды.
Угадай что?
Люди сообщили об этих 3 секундах как об ошибке. В реальной разработке вы можете столкнуться с медленным интернет-соединением, неоптимизированным кодом, длительной обработкой операций или просто слишком большим объемом данных. Поэтому приложение может работать не так быстро, как ожидают пользователи. В то время как первые последователи могут дать вашему продукту второй шанс, подавляющее большинство людей сразу же его закроют.
Если только интерфейс вашего продукта не обеспечивает четкую немедленную обратную связь о действиях пользователей. Что только что произошло — баг или простой запрос к серверу? Сколько времени пользователю нужно ждать, чтобы использовать инструмент или веб-сайт? И почему пользователь вообще должен ждать?
Давайте углубимся в анимацию загрузки:
Краткая история анимации загрузки.
Загрузка анимации: 101
Мелкие детали пользовательского интерфейса могут быть разными.
Простой или искусно сделанный?
Полезные инструменты и ресурсы
Для такого типа обратной связи дизайнеры используют индикаторы выполнения, индикаторы загрузки, предварительные загрузчики или счетчики. Они объясняют пользователям, когда что-то происходит или загружается, и в идеале сокращают время умственного ожидания.
Как вы думаете, когда дизайнеры начинают задумываться об обратной связи такого типа?
Я был удивлен, увидев статьи о Nielsen Norman, в которых упоминалось время отклика и анимация загрузки в 1993 году (со ссылкой на 1985 ресурсов):
В тех случаях, когда компьютер не может дать довольно немедленный ответ, пользователь должен получать постоянную обратную связь в виде индикатора процентов выполнения [Myers 1985, «Важность индикаторов выполнения в процентах для компьютерно-человеческие интерфейсы».
Индикаторы выполнения имеют три основных преимущества: они убеждают пользователя в том, что система не дала сбой, а работает над его или ее проблемой; они указывают примерное время ожидания пользователя, что позволяет пользователю выполнять другие действия во время длительного ожидания; и, наконец, они предоставляют пользователю что-то, на что он может посмотреть, что делает ожидание менее болезненным. — Якоб Нильсен, 1 января 19 г.93
Начиная с Web 1.0 почти на каждом веб-сайте есть предварительные загрузчики. Вы можете заметить эти движущиеся счетчики, пока остальная часть содержимого страницы все еще загружается.
В 2007 году прелоадеры сайта выглядели так:
Генератор загрузки из 2007 года. Заметили знакомые спиннеры?
В то время вы также могли найти руководства по созданию анимации загрузки с помощью Fireworks (2007 г.) или Flash (2008 г.) и некоторые инструменты, такие как «Loading GIF Generator» (2009 г.).
В 2010 году с CSS3 дела обстоят быстрее. Появилось множество руководств, обучающих людей делать CSS3-анимации, загружающих пакеты анимаций, обучающих видео на YouTube. Дизайнеры могли делать загрузку спиннеров в Photoshop Cs5, который был довольно популярен десять лет назад.
Загрузка анимации была больше связана с Интернетом, потому что время загрузки страницы было проблемой. Некоторые сайты довольно творчески подошли к использованию предзагрузчиков Flash, и это было в 2010 году:
30 Creative Flash Preloaders Examples, статья 2010 года
Время от времени индикаторы выполнения и счетчики подвергались критике в пользу экранов Skeleton (Детали мобильного дизайна: Избегайте счетчика, 2013). В то время как в 2014-2016 годах дизайнеры стали уделять больше внимания анимации загрузки. Таким образом, вы можете увидеть более подробные руководства по загрузке и восприятию времени (Smashing Magazine, 2015), коллекции бесплатных загрузчиков, плагинов и проектов с открытым исходным кодом.
Знакомство с Material Design в Preloaders (2016)
Тенденции и подходы к дизайну изменились, но необходимость предоставления отзывов о пользовательском интерфейсе для пользователей все еще существует.
В идеальном мире анимация загрузки должна:
быть показана пользователю как можно меньше.
Если вы сможете заставить свой инструмент или сайт работать достаточно быстро, это будет прекрасно. Или, по крайней мере, сделать так, чтобы воспринимаемая скорость соответствовала ожиданиям пользователей. Отображение очаровательного индикатора загрузки бесконечное количество времени будет раздражать пользователей и снижать UX. Хотя показывать анимацию по умолчанию без указания времени — определенно плохая идея (какой-то забавный твит на эту тему). Так что лучше сначала решить проблемы с загрузкой контента.
Оценить время.
Это может быть простое сообщение о приблизительном времени ожидания или визуальное представление выполненной работы. Сколько файлов загружено из общего количества? Сколько минут займет обновление программного обеспечения? Насколько уже достигнут прогресс? Эти детали UX могут сформировать ожидания и уменьшить разочарование.
Загрузка-Астронавты от Cream M.
Объясните, почему пользователю нужно ждать.
Не всегда очевидно, почему некоторые приложения или инструменты не реагируют мгновенно, как это было изначально с нашим инструментом. Умная анимация загрузки может дать повод подождать и объяснить, что происходит под капотом:
Анимация загрузки файла от Vinoth
Возвращаясь к нашему примеру с инструментом обратной связи. Пока мы не сделали загрузку менее 1 секунды, решили объяснить время ожидания. Анимация указывает, что приложение загружает скриншоты. Теперь ясно, что наш инструмент не завис, он просто работает по запросу:
Экран загрузки Flawless Feedback
Сделайте процесс ожидания менее утомительным .
Этого можно добиться, поместив привлекательную анимацию, которая отвлечет внимание пользователя.
Здесь есть фанаты Игры Престолов? Наслаждайтесь анимацией загрузки Night King от
Алекса Кунчевского
Уменьшите восприятие пользователем времени ожидания.
Это очень связано с упомянутым выше пунктом. Если вы найдете что-то, что привлечет внимание пользователя во время ожидания, умственное время пройдет быстрее. Это может быть броское сочетание цветов, интересная или симпатичная идея или просто блины:
Загрузчик капкейков от Пьера Кляйнхауса
Подчеркните брендинг и голос компании.
Если вы, как пользователь, все равно будете смотреть и ждать, пока ваше приложение или веб-сайт соберет все воедино, почему бы не использовать это время с умом? Я не предлагаю вам делать анимацию загрузки навязчивой или использовать какие-то психологические трюки. Просто сделайте так, чтобы процесс загрузки соответствовал голосу вашего бренда, и пусть это будет крошечная деталь, которая имеет значение:
Анимация загрузки для приложения для продажи билетов BVG от Антонина
Хотя кто-то может подумать, что загрузчик — это просто крошечная деталь пользовательского интерфейса, у него есть много типов и вариаций. Тем не менее, есть несколько вариантов обратной связи с пользовательским интерфейсом при загрузке контента — индикаторы выполнения, счетчик загрузки (бесконечная анимация загрузки) и скелетные экраны.
Индикатор выполнения
Используется, когда можно определить время загрузки. Индикаторы выполнения могут быть реализованы с числовой или визуальной индикацией и могут иметь любую форму.
Те, у кого цифровая индикация, иногда называют индикатором процентов готовности. Они могут быть простыми или очень креативными, в зависимости от того, что лучше подходит для ваших пользователей и бизнес-потребностей:
Изображение экрана загрузки для приложения Нгуен Тран
Вы также можете найти интересные индикаторы выполнения, выполненные в виде зацикленная анимация с указанием процента :
Анимация загрузки от Dragonlady
Основная идея индикаторов выполнения состоит в том, чтобы показать, сколько времени займет действие, и состояние прогресса на данный момент. В зависимости от задач пользовательского интерфейса индикаторы выполнения могут быть просто линейными без индикатора процента.
Подумайте о Gmail. Он не показывает процент прогресса, но у пользователя есть ощущение прогресса загрузки. Два примера, простые и креативные:
анимация загрузки Gmail и более креативный пример загрузки от Аллена Чжана
Загрузка счетчика или бесконечной анимации загрузки
Используется, когда время загрузки неизвестно. Это могут быть счетчики по умолчанию, творческие неопределенные индикаторы, анимации, показывающие, что ваше приложение «что-то делает» под капотом.
Последний тип анимации, вероятно, вызывает меньше стресса у пользователя, поскольку он пытается объяснить, почему загрузка занимает время:
Иконка расчета загрузки Хоанга Нгуена очень верно и для индикаторов выполнения). Как вы думаете, какое приложение может использовать такую анимацию загрузки?
LittlePin Spinner от Daniel Sofinet
Infinite Индикаторы просят пользователей подождать, пока что-то загружается или делается, но никогда не указывает, сколько времени это займет. Исторически для этой задачи использовалось зацикленных анимаций . Они могут быть довольно простыми или очень креативными и очаровательными (в течение первых нескольких минут):
Загрузка кота от domaso. Так мило! Бесконечность Эстер Балог. Выглядит круто, но, наверное, я не буду счастлив смотреть на это вечно…
Как видите, в настоящее время анимация загрузки — это больше искусство, чем просто элемент пользовательского интерфейса состояния системы.
Экраны скелета
Экраны скелета обеспечивают постепенный прогресс в загрузке интерфейса. Вы можете представить их как черные страницы (заполнители) с пошаговой загрузкой изображений, текста и другого контента, который вы можете увидеть на странице.

Этот термин впервые появился в уже упоминавшейся статье Люка Вроблевски (Mobile Design Details: Avoid The Spinner, 2013). Люк посоветовал использовать каркасные экраны для лучшей загрузки. Эта идея была поддержана другими дизайнерами в этой области и использована в пользовательском интерфейсе Facebook, LinkedIn, YouTube, Google Drive и других. Некоторые действительно интересные выводы по теме вы можете прочитать в руководстве Билла Чанга.
Просто чтобы привести реальный пример. Если вы используете инструмент для веб-дизайна Figma, вы увидите индикатор выполнения в верхней части страницы с постепенной загрузкой пользовательского интерфейса — сначала вы видите заполнители для проектов, а затем доступные данные:
Figma UI
Помимо хороших примеров в этом руководстве и концепций дизайна на Dribbble в большинстве приложений вы увидите стандартный или простой загрузчик.
Некоторое время в качестве лучшей практики рекомендовались упрощенные загрузчики, поскольку они требуют меньше вычислительной мощности (это верно, особенно для Интернета). Гораздо проще использовать индикаторы загрузки по умолчанию или с открытым исходным кодом и не тратить время дизайнеров на создание пользовательской анимации и время разработчиков на ее реализацию.
В сообществе дизайнеров я видел разные взгляды на использование загрузчиков по умолчанию.
С одной стороны, компоненты пользовательского интерфейса по умолчанию, предлагаемые операционной системой, позволяют дизайнерам улучшать нативный дизайн и улучшать UX. Пользователи знакомы с нативными компонентами и интуитивно знают, как их использовать и каков будет результат.

Вот удобный пример. Владельцы iPhone знают, чего ожидать от стандартных для платформы элементов управления навигацией, кнопок или значков. Мы могли предположить, что когда пользователь видит загрузку по умолчанию в каком-то приложении для iOS, он может даже не заметить его существования и времени ожидания.
С другой стороны, у пользователей может быть негативный предыдущий опыт работы с компонентом по умолчанию, особенно с загрузчиком:
Еще одна вещь, которую следует упомянуть, если приложение использует индикатор загрузки ОС вместо пользовательского, пользователи с большей вероятностью будут жаловаться. о скорости интернет-соединения или физического устройства, а не о производительности приложения. — Йи Гу, инженер-программист Quora.

Я не смог найти исследования по этому обсуждению, но это определенно интересно для рассмотрения.
В любом случае, если вы работаете над MVP (минимально жизнеспособным продуктом) или над первым релизом вашего сайд-проекта, логичнее использовать простую анимацию загрузки по умолчанию или с открытым исходным кодом. Даже самая креативная анимация загрузки не спасет ваш продукт, если она не решит реальной потребности.
Набор миксинов SCSS для загрузчиков и счетчиков отдельных элементов, проект с открытым исходным кодом.
Достаточно интересно, но в 2016–2019 годах мы могли видеть гораздо более качественно проработанные анимации загрузки. Внимание к деталям, растущая зрелость дизайна в компаниях, лучшая техническая среда и доступность многих инструментов анимации — все это сделало элементы пользовательского интерфейса состояния системы более креативными. Если вы прокрутите Dribbble, вы увидите десятки вдохновляющих загрузочных снимков, так что вам будет намного проще создать свой собственный.