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

Содержание

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

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

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

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

Пытаюсь сделать индикатор процесса в веб приложении (некий 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=»1671994866″>
10117
485 0

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

5 лет назад
52 просмотра
GIF анимация
gif/jpg/png
Загрузка Gif-дизайнов, тем, шаблонов и загружаемых графических элементов на Dribbble

Просмотр проверки загрузки
Проверка загрузки
Посмотреть цепочку градиентов
Градиентная цепь
Просмотр жидкостной геометрии Загрузчики
Жидкостная геометрия Загрузчики

Посмотреть счетчик
Спиннер
Посмотреть Загрузка приложений
Загрузка приложений
Посмотреть загрузчик
Погрузчик

Просмотр 3D-загрузчика
3D-загрузчик
Просмотр лабораторных загрузчиков
Лабораторные загрузчики
Посмотреть концепцию спирального предварительного загрузчика
Концепция спирального предварительного загрузчика
Посмотреть исследование обработки анимации [VR]
Обработка исследования анимации [VR]
Посмотреть погрузчик XL
Погрузчик XL

Посмотреть квадратный погрузчик
Квадратный погрузчик
Просмотреть геномику дроплетов — веб-загрузчик
Droplet Genomics — Web Preloader
Посмотреть загрузчик
Погрузчик
Посмотреть плоские погрузчики
Плоские погрузчики
Посмотреть анимацию загрузки Lottie — продукт
Анимация загрузки Lottie — продукт
Посмотреть Загрузка. ..
Загрузка…
Посмотреть Загрузка XXI
Загрузка XXI
Посмотреть действие кнопки «Загрузить»
Действие кнопки загрузки
Посмотреть анимированный логотип Hugah
Анимированный логотип Hugah
Посмотреть анимацию загрузчика
Анимация загрузчика
Просмотр компонентов Gif Banana Loaders
Компоненты загрузчиков бананов Gif
Посмотреть анимацию логотипа Melalogic
Анимация логотипа Melalogic
Посмотреть загрузчик Crafttor
Погрузчик Crafttor
Зарегистрируйтесь, чтобы продолжить или войдите
Загрузка еще…
SlowLoader | 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 не будет предварительно загружать содержимое или ускорять его загрузку. Он просто отобразит индикатор того, что контент все еще загружается. Пользователи веб-сайта, ожидающие отображения контента, скорее всего, задержатся на несколько секунд дольше, если есть намек на то, что что-то происходит.