Если вы используете на своем сайте какие-либо калькуляторы, которым надо дать время на расчет, или просто сложные скрипты, то вам весьма пригодится такое расширение, как progressbar.
Не будем заморачиваться и изобретать велосипед, а возьмем уже готовое решение отсюда – codesells. Представленный здесь прогресс бар представляет собой небольшой плагин с набором нехитрых настроек.
Плюсами данного плагина являются: наличие callback функции, которая позволяет отследить изменение процента загрузки контента, и очень простая установка.
Устанавливаем скрипт на сайт:
<link href="tinytools.progressbar.min.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="tinytools.progressbar.min.js" type="text/javascript"></script>
Добавляем строку HTML:
<div id="progress"></div>
Вызываем плагин:
$("#progress").progressBar();
Рассмотрим настройки нашего прогресс бара:
- width – задаем ширину индикатора в px;
- height – задаем высоту в px;
- percent – устанавливаем начальное значение процента прогресс бара (просто число);
- showPercent – указываем, выводить или нет значение процентов посередине строки прогресс бара;
- split – указываем, если хотим разделить строку на равные части (задаем число по количеству частей);
- onPercentChanged – callback функция принимает два параметра. Первый – изменение процента, второй – возвращает jQuery объект прогресс-бара.