falbar Анимированный прогресс бар в 4 строки кода

Анимированный прогресс бар в 4 строки кода

11 декабря 2014 8624 0

Наличие на сайте прогресс бара действительно будет полезным, когда пользователю требуется сообщить о том, что на странице происходит что - то при долгом выполнении скрипта. Из этой статьи вы узнаете, как установить к себе на сайт progressbar, затратив на это всего пару минут времени.

Реклама

Есть множество скриптов и плагинов, реализующих такой - же функционал, но, как по мне, этот вариант - наиболее простой и короткий. Для начала мы добавим HTML прогресс бара на страницу:

<div id="progressBar">
 <div></div>
</div>

Теперь пропишем стандартные стили для этой структуры:

#progressBar{
 margin-left: 100px;
 width: 400px;
   height: 22px;
}
#progressBar div{
 height: 100%;
   color: #fff;
    text-align: right;
  font-size: 12px;
    line-height: 22px;
  width: 0;
}

С подготовительным этапом покончено. Осталось подключить функцию или добавить её к себе в проект:

function progressBar(percent, $element){

    var progressBarWidth = percent * $element.width() / 100;

    $element.find("div").animate({
        width: progressBarWidth
 }, 500).html(percent + "%&nbsp;");
};

Функция progressBar() принимает два параметра: процент выполнения и элемент. Вызов её будет выглядеть таким образам:

progressBar(50, $("#progressBar"));

Как видите, вам потребуется всего четыре строки кода, чтобы реализовать у себя красивый анимированный прогресс бар. В архиве с примером вы найдёте пять вариантов стилей прогресс бара. Стандартные стили не отвечают за визуальное представление скрипта, поэтому стоит подключить один из вариантов, например – это будут стили, лежащие в папке default, с таким же названием добавляем класс к диву с id=progressBar.

После выполнения всех этих действий у вас на странице появится довольно хороший и удобный прогресс бар.

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