Иконки загрузки GIF, SVG и APNG с генератором
СнежинкаFree
ХодьбаFree
СкейтбордингFree
РакетаFree
РастениеFree
В любвиFree
ПризракFree
Fidget-spinnerFree
КнигаFree
Бьющиеся сердцаFree
БаскетболFree
Circles-menu-3Free
МеханизмFree
Песочные часыFree
Iphone-spinner-1Free
Iphone-spinner-2Free
Loading-barFree
РомбFree
Бегущее сердцеFree
ПоискFree
НастройкиFree
Spinner-2Free
Spinner-3Free
Spinner-5Free
Вращающиеся стрелыFree
Иконка загрузки или AJAX loader — это анимация, отображающая процесс загрузки на сайте или приложении. Будучи критически важной частью дизайна и юзабилити (удобство пользования) веб-сайтов и приложений, в основном, эти иконки используются чтобы показать пользователю, что на фоне что-то грузится (например, AJAX запрос).
Эти анимационные объекты обычно используются в формате GIF, который исторически набрал свою популярность, но анимация загрузки в форматах SVG и CSS понемногу вытесняют этот формат из-за возможности бесконечно растягивать эти изображения без потери качества. То есть, они могут иметь любое разрешение и при этом быть относительно маленькими в битах. Кроме данных форматов существует еще и APNG (или анимированный PNG), появившийся из-за ограничений формата GIF, но был не принят многими сообществами в начале. В данный момент, формат APNG поддерживается большинством «крупных» браузеров, но не очень популярен из-за большого размера (в битах), по стравнению с другими форматами.
Проект Preloaders.net предоставляет более 1000 разных анимаций разбитых на 18 категорий, включая самые часто используемые — спиннеры загрузки, горизонтальные, произвольный анимированный текст и другие. Большинство «не 3-дшных» изображений доступны во всех трех форматах — GIF, APNG и SVG. Для удобства пользователей, изображения могут быть отсортированы по наличию в формате SVG, также как и по многим другим параметрам.
Другой наш подпроект предоставляет иконки загрузки в формате CSS.
Однако, это не основная функциональность проекта — это форма-генератор позволяющая изменять анимированные изображения по желанию внутри самого проекта и создавать свои уникальные иконки. Просто нажмите на желаемую анимацию и вы можете выбрать желаемые цвета, размеры, скорость анимации, количество кадров и другие опции. Все иконки загрузки на Preloaders.net бесплатны для личного и коммерческого использования (исключение — распространение, требующее ссылку на проект.
Большинство анимаций имеют иконку «добавить в корзину». Эта кнопка добавлена для тех, кто желает купить исходный файл (в форматах Adobe Photoshop (.PSD) или 3DS Max (.MAX)) для возможности расширенного редактирования соответствующего изображения.
Криптовалюта (403)
Деньги и Финансы (167)
Анимированный текст (10)
3-х мерные (3D) (131)
Астрономия / Планеты (13)
Круглые (165)
Анимированные флаги (215)
Фрукты и овощи (8)
Горизонтальные (46)
Люди (22)
Прямоугольные (17)
Знаки религий (5)
Наука (18)
Смайлики (80)
Погодные условия (12)
Знаки зодиака (24)
Разное (32)
GIF
APNG
SVG
Прозрачный фон Сохранять цветаЦвет переднего планаЦвет фонаШирина Высота
Инвертировать цвета Отражать фон? Перевернуть горизонтальноПеревернуть вертикально
Кол-во кадров
Обратная анимация Создавать автоматич.
Загрузка…
asp.net mvc — Индикатор процесса в веб приложении
Вопрос задан
Изменён 6 лет 8 месяцев назад
Просмотрен 323 раза
Пытаюсь сделать индикатор процесса в веб приложении (некий 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>
}
4
Replace,
UpdateTargetId = "target",
LoadingElementId = "loader"
}))
{
/* Область, которая будет получать обновления */
<div>
@Html.Partial("_Index")
</div>
/* Элемент-анимация загрузки */
<div>
<img src="@Url.Content("~/Content/Images/loading.gif")" alt="" />
Ваш запрос выполняется...
</div>
}
Зарегистрируйтесь или войдите
Регистрация через Google Регистрация через Facebook Регистрация через почтуОтправить без регистрации
ПочтаНеобходима, но никому не показывается
Отправить без регистрации
ПочтаНеобходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
Медленная загрузка | 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 останутся вместе на странице.
Contribute
Если вы найдете этот элемент стека полезным в ваших личных или коммерческих веб-проектах; рассмотрите возможность внесения небольшого вклада в текущую поддержку и обновления. Вы можете внести свой вклад в проект Stacks4Stacks разными способами и получить от этого выгоду.Настройки конфиденциальности
Здесь вы можете изменить настройки конфиденциальности.
Используя этот веб-сайт, вы соглашаетесь с политикой конфиденциальности
Загрузка анимаций — Lottiefiles
Анимации
Бесплатные анимации
Доступ к крупнейшей в мире коллекции бесплатных анимаций
Торговая площадка
Покупка и продажа премиальных анимаций Lottie
Нанять аниматоров
Найти и нанять аниматоров для пользовательских анимаций Лотти
Платформа
Платформа LottieFiles Новый
Сотрудничайте с командами, оптимизируйте файлы, редактируйте, персонализируйте и т.