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

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

Два способа сделать меню для сайта на HTML и CSS

26 января 2015 Антон Кулешов

Всем привет! Сегодня разберем пару примеров реализации горизонтального меню – самых простых и самых надежных.

1em или 16px

31 октября 2015 Антон Кулешов

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

Кнопки социальных сетей

28 мая 2016 Антон Кулешов

Приветствую, читатели falbar, сегодня мы рассмотрим одну простенькую JavaScript библиотеку sharer для добавления кнопок социальных сетей. Большой плюс этого скрипта заключается в том, что в нём реализована функция «поделиться» более чем для 20 социальных сетей.