Показать Меню
falbar Progressbar для сайта

Простой прогресс бар с набором настроек

Progressbar для сайта

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

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

Плюсами данного плагина являются: наличие 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 объект прогресс-бара.

Подписаться на обновления

Комментариев еще не оставлено