О сайтеПравилаКонтакты
  • Крипто
  • Новости
  • Статьи
  • Люди
  • Теги
» Статьи » Разработка » Анимированный прогресс бар в 4 строки кода
  • Инструменты
  • Заработок
  • Раскрутка
11 декабря 2014 . Антон Кулешов

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

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

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

#Прогрессбары и лоудеры
14 596
Антон Кулешов
Простой прогресс бар с набором настроек Создание анимированного кольца загрузки при помощи SVG и GSAP Простой прогресс бар загрузки страницы Гибкий прогресс загрузки Прогресс бар как на YouTube
Комментарии не найдены

Эффект падающего снега на jQuery

Генерация случайного цвета на JavaScript

Популярное
1 Пишем парсер контента на PHP2 Лучший способ прижать футер используя flexbox3 Кликджекинг как соцфишинг, пишем скрипт для получения id пользователя вконтакте4 Пишем первый модуль для 1С-Битрикс с использованием ядра D75 Делаем подгрузку контента при прокрутке страницы
Обратите внимание