Реклама
timeweb
falbar

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

3 февраля 2015 2010 0

Если вы используете на своем сайте какие-либо калькуляторы, которым надо дать время на расчет, или просто сложные скрипты, то вам весьма пригодится такое расширение, как 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 объект прогресс-бара.
Реклама
Комментариев еще не оставлено
no_avatar