Многие задаются вопросом где их найти а темболее как сделать свою уникальную иконку загрузки. Сегодня мы рассмотрим сервисы, с помощью которых можно создать подходящую для вашего проекта иконку загрузки. Вы, конечно, можете нарисовать ее сами в том же Фотошопе, но это не всегда удобно и почти всегда довольно долго.
Рассмотренные сервисы позволяют выбрать стиль, цвет и фон для нужной иконки и сразу же получить готовый результат. В общем, довольно полезная вещь, как мне кажется.
Preloaders.net
Имеется большой выбор различных типов иконок — от обычных круглых до необычных трехмерных. Помимо цветов, можно менять размер и скорость анимации. Всего около 80 различных иконок.
AjaxLoad.info
Как мне кажется, это самый известный сервис такого рода. Можно выбрать индикатор, его цвет и цвет фона (его можно сделать прозрачным). Доступно 37 иконок.
LoadInfo.net
Внешним видом отличается от предыдущих, плюс там есть иконки, которых я больше нигде не видел (специфичные, но довольно неплохие). Для каждой из 132-х иконок можно задать цвет фона, цвет иконки и размер — 16×16, 32×32 или 48×48.
Сервис от Веб Скрипт Лаб
У этих парней в наличии есть 34 иконки, для которых помимо общепринятых цветов можно задавать и скорость. Размер, правда, менять нельзя. Кстати, выбор иконки в селекте сделан неудобно — нужно сначала выбрать, и лишь потом можно увидеть как выглядит иконка.
Chimply.com
У этих ребят не все иконки такие же клевые, как у сервиса ЛоадИнфо, но зато здесь вы можете задавать различные параметры каждой иконки, такие как скорость, направление вращения, количество палочек (кружочков, ромбиков и т.д.), размер и цвета.
Источник - world-blog.ru
После создания картинки устанавливаем скрипт на сайт, чтоб всё работало.
1) Создаем новый глобальный блок - "$GLOBAL_SHAPKA$"
2) Всатвляем в него следующий скрипт:
Code
<span id="load" style="display:none; position:absolute;left:8%; top:1%; width:162px; height:51px; border:0px;"><table><tr><td height="22px"></td></tr><tr><td height="25px" width="162px" align="center"><img src="http://imobile.ucoz.com/templates/load/loading.gif" width="160px" height="20px"></td></tr></table></span>
<script type="text/javascript">
function show_load(state, wait)
{ if(state > 0)
document.getElementById("load").style.display = "block";
else setInterval('document.getElementById("load").style.display = "none"', wait=3000); }
show_load(1, 0);
</script>
Индивидуальные настройки в первой строке мы изменяем под себя место, в какой части будет грузиться наш лоадер left:8% - расстояние от левой части сайта; top:1% - расстояние от верхней части сайта. Теперь смотрим ниже и находим width="160px" - задаем ширину нашего рисунка, height="20px" - задаем высоту рисунка.
3) В подвал сайта(это стндартный блок - "нижняя часть сайта") добавляем:
Code
<script type="text/javascript">show_load(0,1000);</script>
Сдесь можно указать время показа нашего лоадера wait=3000
