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

Обновлено: 05.07.2024

, который позволяет показывать прогресс определенных задач, таких как добавление чего-либо или индикация загрузки, вобщем всего, что находится в процессе. В этой статье мы увидим, как добавить этот элемент в документ, как оформить его при помощи CSS и анимируем полосу индикатора выполнения. Как вы увидите далее, в этом нет ничего сложного, и все можно будет сделать несколькими правилами в стилях css.

Основы использования

Прогресс бар может быть добавлен тегом

. Значение индикатора определяется на основе минимального и максимального атрибутов, следующим образом:

Поскольку речь идет о нативном прогресс баре, вид будет меняться в зависимости от платформы. Ниже видно как стандартный индикатор выглядит в Windows и OSX.

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

Оформление прогресс бара

В таблице стилей, мы можем обращаться к селектору

для добавления нужных нам стилей. В наших примерах мы изменим цвет фона, удалим границу, и сделаем углы плавными.

Мы увидим, что каждый браузер обрабатывает стили по-своему.

В Chrome и Safari, будут удалены наши стили и заменены на Webkit стили, (по крайней мере, на данный момент).

Итак, нам нужны обходные пути.

В Chrome и Safari, обращение к элементу

Таким образом, мы должны добавить эти Webkit псевдо-классы.

Firefox также имеет свой специальный псевдо-класс

В отличие от Chrome и Safari, этот псевдо-класс в Firefox относится к значению (ползунку).

И так, вот все наши стили для стилизации

Примеры

Собственно, нет ничего сложного чтобы стилизовать этот элемент. Еще раз подведем итог, что бы стало все понятно. Сначала пишем правило для progress, это правило будет у нас являться также правилом для фона элемента в браузерах mozilla. Потом пишем отдельно правила для фона и ползунка для браузеров Chrome, и в заключении для ползунка в mozilla.
Вот первый пример:

HTML

Элемент div тут просто для выравнивания и небольшой красоты.
CSS

Еще один пример с фэйковой демонстрацией работы:

HTML

CSS

jQuery
Для анимации создадим простенький скрипт.

Кому интересна реализация скрипта:
Идея состоит в том, индикатор будет расширяться от 0 и остановится как только он достигнет максимального значения. Также будем отображать числовое значение.
Сохраняем элемент индикатора, значение индикатора прогресса, максимальное значение, а также время в переменные.

Затем мы создаем переменную, которая повторит функции анимации. В этом примере мы называем переменную loading.

Внутри функции выше, мы устанавливаем прогресс интервала. Будем увеличивать значение на 1.

И потом, добавим результат на прогресс бар.

Мы также показываем, значение рядом с индикатором:

Далее, мы создаем новую функцию для запуска функции анимации.

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

Сегодня будем делать прогресс-бар. Он может помочь вашим пользователем понять, много ли осталось читать.

Все вместе решение занимает 20 строк. Демо на codepen.

Раз

Создаем HTML разметку:

Два

Накинем немного css оформления:

Линию сделали фиксированной с нулевой шириной и высотой в 5px, сделали желтый фон. body сделали минимальную высоту для проверки, чтобы не набивать бестолковым контентом. Сделали темный фон.

Если изменить ширину в css, мы увидим вот такую картину:

Линия и темный body

Отлично, все работает как и планировалось.

Три

Прежде чем писать код нам ответить себе на 2 вопроса:

Какие данные нам нужны?
Когда будет обновляться линия

Какие данные нужны: высота браузера, высота документа, отступ от верха страницы.

Когда будет обновляться линия: при прокрутке и еще при посещении. Браузер умеет запоминать положение пользователя после обновления страницы, так что к этому нужно быть готовым.

Так как обновление будет происходить в нескольких местах, а код будет одинаковый, создадим функцию lineWidthSet ( ), но прежде объявим несколько переменных:

Line — наша линия,
bodyHeight — высота body,
doc — корневой элемент документа, нужен нам для расчета отступа от верха.

Теперь приступим к написанию функции lineWidthSet ( ):

Получаем отступ от верха страницы.
Прибавляем к нему высоту окна браузера.
Высчитываем процентное соотношение позиции от высоты страницы.
Устанавливаем ширину линии.

(2) Почему мы прибавляем высоту браузера?. Когда вы на находитесь на странице, вы уже видите то, что в области окна вашего браузера, то есть вы уже это прочитали.

В соответствии с списком действий, пишем функцию:

(1) Здесь мы используем несколько проверок, для кроссбраузерности. Получили отступ от верха страницы.

(4) Установили ширину линии

Теперь нужно эту функцию вызывать при 3 событиях: загрузка, прокрутка, изменение ширины браузера. С загрузкой все понятно, просто вызываем функцию без каких-либо событий ( 1), а для прокрутки добавляем событие ( 2):

Для обновления ширины при изменении ширины окна браузера есть событий resize. Когда происходит resize документа, вызываем функцию, она будет перерассчитывать ширину линии.

Прогресс бар (progress bar) используется на сайтах, когда нужно показать, что идёт процесс загрузки информации или отобразить объём введённых пользователем данных, например, при регистрации, оформлении заказа, заполнении анкеты, при прохождении теста и т. д.
В этой статье я расскажу, как создать анимированный цветной прогресс бар в виде окружности с использованием элемента HTML5 .

Составим техническое задание на создание прогресс бара в виде окружности:

Прогресс бар должен иметь возможность настройки под конкретную задачу, в настройках можно изменить:
— углы начала и окончания прогресс бара;
— радиус;
— толщину;
— палитру и количество используемых цветов;
— скорость анимации.
Возможность управления отдельными секторами прогресс бара с помощью обработчиков событий.
Заполнение прогресс бара должно быть градиентным с использованием нескольких цветов.
Должны отображаться проценты заполнения прогресс бара.

HTML-вёрстка прогресс бара.

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

Таблица стилей для создания прогресс бара.

Небольшая таблица стилей, которая определяет внешний вид прогресс бара и кнопки.

Пишем JavaScript для создания прогресс бара.

Для ограничения области видимости нашего скрипта и исключения конфликтов с другими js-скриптами, разместим код в анонимной самозапускающейся функции.

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

Настройка цветного прогресс бара.

Для равномерного распределения градиента по окружности, разобьём прогресс бар на семь частей (секторов). Размер одного сектора составить 45 градусов. Такое разделение, кроме равномерного градиента, позволит подключить семь обработчиков событий. Каждый обработчик будет запускать отрисовку следующего сектора. При этом, этот сектор будет начинаться с цвета, в который был окрашен конец предыдущего. За счёт этого обеспечивается плавность цветового перехода между секторами.

Нам неоднократно придётся переводить градусы в радианы. Для этого напишем маленькую функцию getRadians :

Теперь код самой функции init с подробными комментариями:

Алгоритм рисования цветного прогресс бара.

Получаем из массива options.colors , содержащего палитру цветов прогресс бара, пару, которая будет использоваться в качестве начала и конца градиента текущего сектора.

Получаем координаты X, Y точек начала и конца текущего сектора прогресс бара. Это можно сделать при помощи следующих формул:
x = xc + r * cos(a)
y = yc + r * sin(a)
где xc и yc — координаты центра окружности, r — радиус, a — угол.

Хочу напомнить, что за начало отсчёта принимается верхний левый угол элемента .

Создаём объект gradient , который будем использовать для обводки сектора окружности:

Используя метод createLinearGradient , создаём объект линейного градиента gradient . В качестве аргументов метод принимает значения координат начала и конца сектора, к которому он будет применён.
Используя метод addColorStop определяем цвет в начале и в конце объекта gradient .
С помощью метода strokeStyle назначаем полученный градиент для обводки сектора.

Фиксируем время начала анимации отрисовки текущего сектора и запускаем анимацию.

Ниже представлен JS-код, реализующий данный алгоритм:

Запомните, это очень важно.
При создании анимации на JavaScript вместо функции setInterval используйте функцию requestAnimationFrame . Эта функция позволяет синхронизировать анимацию со встроенными в браузер механизмами обновления страницы. Результатом будет более эффективное использование графического ускорителя, исключена повторная обработка одних и тех же участков страницы, меньше будет загрузка процессора и, самое главное, анимация будет более плавная, без рывков и дёрганий.

Анимация рисования одного сектора цветного прогресс бара.

Давайте теперь рассмотрим принцип линейной программной анимации применительно к нашей задаче. Для этого необходимо определить ряд параметров, с которыми будем проводить вычисления:

option.duration Время анимации в ms, задано в настройках; option.step Размер сектора в rad, задан в настройках; now Время прошедшее с начала анимации, представляет собою разность между текущим временем и временем начала (старта) анимации start .

Исходя из полученных параметров, можно рассчитать, на какой угол будет отрисован (закрашен) сектор в текущей итерации:

Теперь можно перейти непосредственно к закрашиванию сектора. Для этого используем функцию drawSector , которая закрасит часть сектора на угол равный inc . При вызове функции, ей передаются следующие параметры:
— цвет, используемый для отрисовки части текущего сектора;
— толщина прогресс бара;
— угол, на который будет отрисован текущий сектор.

Прежде, чем начать писать JS-код функции fn , необходимо разобраться, как происходит поэтапное закрашивание сектора:

Как видно из рисунка, при каждой новой итерации сектор закрашивается каждый раз с начала, но на больший угол, при этом слои с закрашиваемыми участками при каждой итерации накладываются друг на друга. Из-за многократного наложения слоёв края прогресс бара получаются рваными. Что бы избежать этого, необходимо градиент, отрисованный в предыдущей итерации, закрасить цветом фона, а уже после этого наложить градиент. Для этого вызовем функцию drawSector дважды: при первом вызове первым параметром будет цвет фона, а при втором вызове — gradient .

Прогресс-бары сейчас стали очень популярны и есть много плагинов, позволяющих добавить их к себе на сайт. Но как сделать собственный? Нет, мы не будем изобретать велосипед, мы сделаем что-то новое — кнопки со встроенной индикацией загрузки. Такие кнопки будут идеальны для отображения прогресса отправки данных формы или выполнения 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. Станет понятнее, если посмотрите сами:

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