Как сделать прогресс бар в html

Добавил пользователь Skiper
Обновлено: 05.10.2024

Прогресс-бары сейчас стали очень популярны и есть много плагинов, позволяющих добавить их к себе на сайт. Но как сделать собственный? Нет, мы не будем изобретать велосипед, мы сделаем что-то новое — кнопки со встроенной индикацией загрузки. Такие кнопки будут идеальны для отображения прогресса отправки данных формы или выполнения AJAX запроса.

Мы будем использовать стили CSS3, что позволит легко настроить кнопки под свои нужды.

Как всегда, начнем с HTML разметки.

Это будет обычный HTML5 с подключением пары файлов: стили — styles.css и скрипт JavaScript — script.js. Так же подключим jQuery и Google шрифт Raleway.

Кнопки представляют собой обычные ссылки. Для того чтобы плагин распознал ссылки, которые надо преобразовать в кнопки с прогресс-баром они должны иметь класс .progress-button. Кнопки также можно настраивать используя атрибуты data-*:

data-type определяет тип прогресс-бара: background-horizontal (по-умолчанию), background-bar и background-vertical.
data-loading определяет текст, который будет показан при загрузке. По-умолчанию Loading..
data-finished содержит текст, который будет показан при окончании загрузки. По-умолчанию Done!

Если атрибут не указан — будет использовано значение по-умолчанию.

jQuery

Теперь напишем JavaScript код чтобы заставить кнопки работать. Код организован как 6 jQuery плагинов: progressInitialize , progressStart , progressIncrement , progressTimed , progressSet и progressFinish .

Благодаря пользовательским событиям мы можем создавать независимые друг от друга функции, такие как progressStart , progresInitialize и progressStart .

У нас есть два специальных CSS класса: .in-progress — заполнение прогресс-бара и .finished — полностью заполнен. Они используются для обновления текста кнопок в коде ниже.

Как уже было сказано мы используем два CSS класса для кнопок – .in-progress и .finished. Но как добавление одного из этих классов может изменить текст кнопки? Легко — мы используем CSS3 функцию attr , которая в сочетании с content , может изменить текст псевдо-элементов :before или :after. Станет понятнее, если посмотрите сами:

Приветствую, друзья, на страницах WebDevTips, сегодня будем делать прогресс бар при прокрутке страницы. Это интересная фишка для ваших сайтов. Он будет визуально показывать пользователю сколько осталось скролить страницу. Так что он имеет не только дизайнерское применение, но и практическое. Делать мы это будем не используя каких либо плагинов или jQuery. Наш прогресс бар будет использовать только ванильный JavaScript и немного CSS.

Как всегда, вы можете взять весь код прямо из сайта, или перейти на Codepen и поработать с этим кодом там. Давайте начнем!

Делаем прогресс бар при скролле

Тут все достаточно просто, закрепим его вверху страницы при скролле. Так же вы можете поместить его в хедер вашего сайта, если вы используете фиксированный хедер.

Для начала разместим его в html. Так как для примера я закреплю его в верхней части сайта, то я пишу этот код сразу после открывающего тега

Далее добавим немного CSS для стилизации.

Важно! Если вы хотите поместить прогресс бар в нижнюю часть фиксированного хедера, вам нужно будет указать bottom: 0 ; transform: translateY(-50%) . Для того, что бы просто зафиксировать его в верхней части страницы используйте код ниже:

Далее приступим к написанию JavaScript кода. Код достаточно простой, так что я просто оставлю комментарии в нем.

Пример прогресс бара при скролле

Если вы следовали инструкциям, у вас должен получиться вот такой эффект при проктурке:

Спасибо, что прочитали! Если у вас остались вопросы — смело задавайте их в комментарии, постараюсь помочь всем)

Так же буду очень благодарен, если вы ознакомитесь с другими моими статьями:

Верстка

Сегодня речь пойдет о том как при помощи CSS3 сделать различные красивые прогресс бары ( Progress Bars) .

В рамках данного урока мы сделаем несколько прогресс баров. Они выглядят так:

ПОСМОТРЕТЬ ДЕМО СКАЧАТЬ ИСХОДНИКИ

Они не используют изображения, только HTML и CSS3.

HTML разметка

Основные CSS стили

Оболочка div — это трек индикатора выполнения. Мы не будем устанавливать ширину, поэтому она будет растягиваться так же широко, как и ее родитель, как это делает элемент уровня блока. Вы могли бы хотя. Высота тоже произвольная. Здесь он установлен на 20 пикселей, но может быть любым.

Тогда промежуток внутри будет заполнять часть индикатора выполнения. Мы сделаем так, чтобы он отображался в виде блока с высотой 100%, поэтому он растягивается, чтобы соответствовать любой комнате, в которой он находится. Затем мы будем использовать связку CSS3, чтобы придать ей градиентный вид.

Получаем типовой прогресс бар

Добавляем другие цвета

Ну и добавим дополнительные прогресс бары

Таким образом вы можете как угодно раскрашивать их.

Делаем полосатый эффект

Мы можем получить крутой полосатый эффект, добавив еще один элемент поверх этого диапазона и наложив на него повторный CSS3-градиент. Семантически это лучше всего достигается с помощью псевдоэлемента, поэтому давайте сделаем это таким образом. Мы собираемся абсолютно точно позиционировать его в точной области пролета (которая уже имеет относительное расположение).

Индикаторы выполнения или индикаторы процесса – это элемент графического интерфейса пользователя, который предназначен для отображения процесса выполнения какой-либо задачи, например, загрузки формы обратной связи на сервер.

Отображение процесса обычно осуществляется слева направо.

Простой индикатор выполнения (progress)

Компонент Progress (в Bootstrap 3 – Progress bar ) создаётся с помощью двух элементов HTML, CSS для установки ширины и нескольких атрибутов. Bootstrap не использует HTML5 элемент progress .

Установка процента завершённости задачи осуществляется с помощью CSS свойства width , которое устанавливается индикатору выполнения (progress) с помощью атрибута style .

Примеры индикаторов выполнения (Bootstrap 3):

Примеры индикаторов выполнения (Bootstrap 4):

Индикатор выполнения с текстовым контентом

Добавление текста в индикатор выполнения осуществляется посредством его в помещения в элемент с классом progress-bar .

Изменение высоты индикатора выполнения

Установка высоты индикатору выполнения осуществляется посредством добавления к элементу с классом progress CSS свойства height с нужным значением.

Изменение цвета индикатора выполнения

Изменения цвета индикатора выполнения в Bootstrap 4 осуществляется с помощью background-классов bg-success , bg-info , bg-warning , bg-danger и др. Один из этих классов необходимо к элементу с классом progress-bar .

В Bootstrap 3 изменение цвета индикатора выполнения с помощью специальных классов progress-bar-success , progress-bar-info , progress-bar-warning и progress-bar-danger . Один из этих классов, как и в фреймворке Bootstrap 4, необходимо добавить к элементу, имеющему класс progress-bar .

Несколько индикаторов на одной полоске

Компоненты "Progress" (Bootstrap 4) и "Progress bar" (Bootstrap 3) позволяют отобразить на одной полоске несколько индикаторов процесса.

Индикаторы процесса с полосатым фоном

Добавление полос к текущему цвету фона индикатора выполнения осуществляется посредством дополнительного класса progress-bar-striped . Этот класс необходимо добавить к элементу с классом progress-bar :

Индикаторы с анимированным полосатым фоном

Полосатый градиент индикатора выполнения может быть анимирован. Осуществляется это посредством добавления дополнительного класса (в Bootstrap 3 - active , в Bootstrap 4 - progress-bar-animated ) к элементу с классом progress-bar . Анимация полос в Bootstrap выполняется справа налево с помощью CSS3.

Читайте также: