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

3 февраля 2015 Антон Кулешов 1754 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
Читайте далее

«Легкая упоротость» глитч эффект

1 апреля 2015 ti1schweiger

«А у тебя коленки сзади грязные!» - согласитесь, звучит неубедительно в реалиях сегодняшнего времени, тем более, когда реальное общение все больше заменяет виртуальное. Как же шутить на 1 апреля? – Да очень просто! Хотите разыграть пользователей своего ресурса? – Используйте глитч эффект. Кто еще не в теме, поясню, глитч эффект – это эффект сломанного монитора, который уже не раз умудрились уронить и у которого серьезно барахлят сведение и вертикальная синхронизация.

Решаем проблемы с добавлением RSS ленты в Google Chrome

29 декабря 2014 Антон Кулешов

Вчера ночью я решил улучшить свой самописец, а именно: добавить RSS ленту. Благо, уже в Яндекс-метрике можно увидеть, что сайт начинает потихоньку подниматься вверх в поисковой выдаче и, в результате чего, появляются новые посетители.

Аутентификация через Twitter

21 января 2016 Антон Кулешов

Продолжаем тему аутентификации через социальные сети и сегодня поговорим о Twitter.