Вы хотите скрасить загрузки каких-либо объектов сайта, сделать более привлекательной загрузку контента сайта, тогда этот урок именно для Вас. В данном посте мы расскажем как можно создать простой анимированный индикатор прогресса на jQuery. Для этого мы будем использовать плагин  Progressbar. Который скрасим, придав ему новые значения, тем самым расширим его возможности и сделаем его динамическим, и приятным для пользователя, вот что у нас с этого получилось..

 

Первым шагом, это будет создание просто HTML-разметки, которая включает в себя подключение скриптов:

Переходим на страницу jQuery UI, выбираем UI Core и единственный виджет – Progressbar, затем нажимаем Download. В полученном пакете будет содержаться весь необходимый набор (jquery-1.6.2.min.js + jquery-ui-1.8.16.custom.min.js + jquery-ui-1.8.16.custom.css + изображения).

Затем применяем стили CSS к нашим индикаторам загрузки:

Теперь сам процесс оживления, происходит это с помощью JavaScript. В первой части кода мы создаем новый плагин jQuery anim_progressbar, а во второй — приводим несколько примеров инициализации с различными параметрами. Конструктору передаются следующие параметры: start (время старта), finish (время финиша) и interval (интервал обновления индикатора).

Вы можете изменить параметры загрузки на свое усмотрение, придав индикаторам необходимые параметры.