Здесь дана детальная инструкция по использованию веб-приложения Preloaders.net для создания анимированнных GIF и/или анимированных PNG для загрузки документов (в частности AJAX).

Поддержка APNG

Изображение снизу говорит о том поддерживает ли Ваш браузер формат анимированных PNG (APNG): Поддерживает ли браузер APNG

Что такое SVG и какие браузеры его поддерживают?

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

Preloaders.net теперь распространяет анимированные иконки загрузки в формате SVG и они также могут быть изменены формой-генератором, который используется для форматов GIF и APNG. Это очень удобный формат, но его не поддерживают некоторые браузеры. Internet Explorer не может отображать анимацию SMIL (стандарт для анимации SVG), поэтому мы рекомендуем Вам включать опцию "Включить ECMAscript для поддержки IE 9+" в "Дополнительных опциях загрузки" доступных в форме генераторе. Она анимирует SVG изображения в браузерах Internet Exprorer версий 9 и выше, но анимация может слегка отличаться от других браузеров.

Без описанной выше опции анимация используемая в наших индикаторах загрузки SVG, поддерживается браузерами указанными здесь: http://caniuse.com/#feat=svg-smil.

Форма создания GIF и APNG

Тип изображния

Параметры этой опции соответствуют типу создаваемого подгрузчика (GIF - анимированный GIF, APNG - формат анимированного PNG, SVG - анимированный SVG).

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


GIF image	PNG image	SVG image

Некоторые наши анимированные изображения имеют максимальное разрешение высшего качества в пределах 128 x 128 пикселей. Чтобы наглядно показать мы использовали такое изображение. Как Вы можете наблюдать изображение в формате GIF не поддерживает частичной прозрачности. PNG показывает результат получше, но изображение немного размыто так как оригинальное изображение имеет размер 128 х 128 пикселей. И наконец-то изображение SVG, которое может иметь любой размер очень четкое потому что оно в векторе. Очень хороший формат для респонсив дизайнов.

Прозрачный фон

Cделать фон анимации прозрачным.

Учтите что при выборе формата GIF все полупрозрачные пиксели будут находиться над выбранным цветом фона

Цвет переднего плана

Цвет самого подгрузчика (работает по алгоритму раскраски - colorize)

Цвет фона

Цвет фона подгрузчика.

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

Скорость анимации

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

Размер

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

Чтобы размеры изменялись пропорционально, отметьте опцию "Соблюдать пропорции".

Если хотите вернуть исходные размеры изображения нажмите на ссылку "сбросить размеры"

Сохранять цвета

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

Опции "Отражать фон" и "Цвет переднего плана" становятся неактивными при использовании этой функции.

Инвертировать цвета

Инвертирует цвета подгрузчика по схеме RGB.

Например белый превращается в черный, красный в голубой и т.п.

Перевернуть

Переворачивает изображение вертикально и/или горизонтально.

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

Отражать фон

Отражать фон в самом изображении.

Эта функция отключается при выборе опции "Сохранять исходные цвета". Например:


С отражением	Без отражения

Обратная анимация

Расставляет последовательность кадров в обратном порядке

Кол-во кадров (Количество кадров)

Количество кадров в созданном изображении.

Рекомендуется уменьшать количество кадров на 4, 8, 16, 32 кадра, в противном случае уменьшение кадров может негативно отразиться на качестве анимации

Создавать автоматически

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

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

Дополнительные опции

Некоторые разработчики предпочитают использовать так называемые "спрайты" (статичные изображения, в которых кадры расположены на оси одно за другим в одном изображении) вместо анимированных изображений. Например, не все браузеры поддерживают формат анимированных PNG, но Вам понадобился формат PNG чтобы поставить его на разноцветном фоне. Опция "JavaScript анимация" позволяет анимировать иконку-спрайт внутри HTML элемента. Опция "Canvas & JS анимация" включает в скачивание скрипт JavaScript, который распологает изображение в Canvas и анимирует его в нем.

Включить ECMAscript для поддержки IE 9+

Эта опция появляется для анимаций в формате SVG. Internet Explorer не поддерживает анимацию SMIL, поэтому советуем добавлять эту опцию если Вам нужно чтобы изображение анимиовалось в браузере IE версий 9 и выше.

РУКОВОДСТВО ПОЛЬЗОВАТЕЛЯ