Индикаторы загрузки веб-страниц

Вторник, Октябрь 16, 2012, 2:17 | Вебмастеру, Графика | 5 296 просм. | Нет комментариев

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

В технологиях я не сильна, говорят, что для этого можно использовать ajax, jquery или просто javascript — кому как нравится. Можно даже вообще на стилях все сделать (когда это возможно) — просто и элегантно…

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

Этот пост о том, где такую картинку-loader найти, если самому рисовать неохота.

Есть, между прочим, сервисы — генераторы таких индикаторов. Примеры:

1. Ajaxload.info

ajaxload.info

Выбираете картинку (я насчитала 39 вариантов), цвет фона, цвет картинки-лоадера (и то, и другое выбирается на палитре)  и жмете Generate it! Любуетесь результатом или делаете все заново. После чего жмете другую кнопку — Download it!

Примерчик:

2. Loadinfo.net

Смысл тот же, только можно еще выбрать размер иконки — (16х16, 24х24, 48х48), а кроме того, гораздо больше картинок, среди которых большинство — полный детский сад: самолетики, кораблики, кружочки. Из неудобств сервиса могу назвать убойный фон: черный!

Loadinfo.net

Примеры:

(что-то transparent background у меня не получился ни разу…)

3. Preloaders.net

Этот сервис мощнее предыдущих: тут можно размеры картинки  заказать любые, скорость анимации регулировать, с цветами и прозрачностью всячески изгаляться, картинку поворачивать. Самих картинок тут просто море — они размещены в 13 категориях. Тут и бары, и смайлы, и люди, и картинки на тему погоды и религии, и иконки соцсетей и т. д. У каждого пункта-опции — всплывающая подсказка (выплывает только по вызову). В общем, красота.

Preloaders.net

Примеры картинок-лоадеров:

 

4. Webscriptlab.com

Вариантов картинок — 34. Задаем цвет (или прозрачность) фона и изображения, скорость (медленно-средне-быстро) и жмем Generate.

Внизу показывают последние сгенерированные картинки.

Пока картинка генерируется, можно наблюдать работу скрипта лоадера в действии 😀

Webscriptlab.com

Я вот такую сгенерировала для примера:

5. Chimply.com

Набор из большого количества весьма душевных лоадеров на любой вкус. Категории картинок-лоадеров: спиннеры, т. е. разные вращающиеся элементы (2D и 3D); анимированные кнопки; бары; значки. В генераторе есть возможность выбрать цвет фона и изображения, размер картинки, скорость анимации. Для отдельных картинок есть дополнительные, индивидуальные, настройки — ну, например, число лучей вращающейся картинки или лепестков цветка. Результат можно сохранить как в gif-, так и в swf-формате. Неанимированные варианты картинок, кроме того,  можно сохранить в любом графическом формате — jpg, png, tiff и даже ico! Все ваши «разработки» сохраняются в истории сгенерированных картинок, и есть возможность в конце рисования загрузить их все скопом.

Chimply.com

Одним словом, очень красивый и и очень продвинутый сервис! Мои эксперименты на этом сайте:

 

Похожие записи:

Понравилось? Поделись ссылкой с друзьями!

А ещё вас может заинтересовать...

Метки: , ,

Оставить комментарий


Вы не бот? Докажите! Решите простой пример: *