Наличие на сайте прогресс бара действительно будет полезным, когда пользователю требуется сообщить о том, что на странице происходит что - то при долгом выполнении скрипта. Из этой статьи вы узнаете, как установить к себе на сайт 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 + "% ");
};
Функция progressBar() принимает два параметра: процент выполнения и элемент. Вызов её будет выглядеть таким образам:
progressBar(50, $("#progressBar"));
Как видите, вам потребуется всего четыре строки кода, чтобы реализовать у себя красивый анимированный прогресс бар. В архиве с примером вы найдёте пять вариантов стилей прогресс бара. Стандартные стили не отвечают за визуальное представление скрипта, поэтому стоит подключить один из вариантов, например – это будут стили, лежащие в папке default, с таким же названием добавляем класс к диву с id=progressBar.
После выполнения всех этих действий у вас на странице появится довольно хороший и удобный прогресс бар.