Вы здесь: Главная » CSS » Использование элемента progress на страницах сайта

Использование элемента progress на страницах сайта

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

Для этого в HTML5 был введен специальный элемент <progress>, который призван упростить эту задачу для разработчиков. Его еще называют индикатором выполнения или прогресс-баром. Достаточно часто он используется не только с точки зрения html-разметки (она простая) или указания css-свойств, но и с точки зрения динамического управления отображением процесса выполнения задачи, который основан на JavaScript-коде.

В спецификации HTML5  поле деятельности элемента progress определено так:

Элемент progress представляет собой индикатор прогресса выполнения задачи.

То есть вы можете выбрать любую задачу, которая требует определенного времени, и показать пользователю процесс ее прохождения с помощью элемента progress. Например, это может быть изменение времени на прохождение теста, прогресс в чтении статьи или книги по отношению к ее объему.

Краткое содержание статьи:

Атрибуты тега <progress>

Для тега<progress> в спецификации указаны такие атрибуты: max и value. Использование элемента progress несколько различается в зависимости от того, какие из атрибутов в нем указаны:

  • Если указан атрибут value, то элемент <progress> считается определенным, или determinate (т.е. имеет точные пределы). В противном случае он считается неопределенным (indeterminate). В зависимости от наличия этого атрибута разные браузеры по-разному стилизуют прогресс-бар.
  • Если атрибут max не добавлен в тег, то допустимым диапазоном элемента <progress> по умолчанию  является от 0,0 до 1,0 включительно.
  • Рекомендуется всегда добавлять атрибуты value (текущее значение) и max (максимальное значение) между тегами в элемент <progress>, чтобы информация по-прежнему была видна пользователям старых браузеров.

Возможные атрибуты тега <progress>:

  1. max - максимальное значение прогресса. Значение по умолчанию - 1.0 (коэффициент, соответствующий 100% выполненной задачи).
  2. value - текущее значение прогресса. Его значение должно быть >= 0 и <= 1 (по умолчанию, т.е. некий коэффициент, соответствующий прогрессу выполнения задачи от 0 до 100%) или значению атрибута max, если он указан.

Поддержка браузерами

Вы можете убедиться в хорошей поддержке элемента  <progress> на сайте caniuse.com. Проблемы есть только в мобильных версиях Safari для iOs, Android 2.1-4.3, а также 6-9 версий Internet Explorer. То есть практически все современные браузеры поддерживают использование этого элемента.

Поддержка браузерами элемента progress

Стили CSS

Со стилизацией все обстоит несколько сложней, т.к. все браузеры имеют свой собственный стиль для элемента <progress>. Однако вы можете переопределить стили в CSS, используя ряд стандартных свойств и ряд псевдоэлементов с вендорными префиксами. И тут есть несколько особенностей:

  1. Следует отметить, что элемент progress по умолчанию имеет стиль display: inline-block, поэтому, если вам необходимо изменить его размер в соответствии с размерами какого-либо родительского элемента, можно задать ему свойство display: block.
  2. Стили необходимо задавать по-разному для элементов progress с установленным атрибутом value и без него.
  3. Для браузеров на различных платформах (webkit или moz), правила для псевдоэлементов нужно указывать отдельно.

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

В Инспекторе свойств (F12) браузера вы увидите следующие стили.

Стили элемента progress в браузере Chrome

Теперь воспользуемся подсказкой, указанной выше, и стилизуем наш прогресс-бар:

Стилизация элемента progress

Стилизация элемента progress

Определенный (Determinate) прогресс-бар с атрибутами value="50" и max="100":

Determinate

Неопределенный (Indeterminate) прогресс-бар без атрибутов:

Indeterminate

Особенности стилизации <progress> в Chrome, Safari и Firefox

Обратите внимание, что для браузеров Chrome и Safari нам нужно использовать 2 разных псевдоэлемента:

  1. progress::-webkit-progress-value, чтобы указать цвет индикатора выполнения;
  2. progress::-webkit-progress-bar, чтобы указать цвет фона самого элемента <progress>:

Для Firefox нужно указывать все свойства в псевдоэлементе -moz-progress-bar.

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

Для Firefox можно также записать строку -moz-orient: vertical  и получить вертикальный прогресс-бар.

Примеры использования элемента progress

Давайте теперь рассмотрим, как мы можем использовать элемент <progress> на страницах, управляя им с помощью JavaScript-кода.

Неопределенный прогресс-бар для отображения процесса загрузки изображения

Загрузку изображений будем выполнять из внешнего источника - сайта unsplash.com, чтобы процесс загрузки был подольше, хотя это весьма условное утверждение при нынешней скорости Интернет-соединений даже на мобильных устройствах. Тег img будем создавать в коде JavaScript.

Для того чтобы протестировать несколько раз загрузку и отображение ее прогресса в элементе <progress>, создадим функцию, которая будет вызываться каждый раз при клике на кнопку "Загрузить изображение". В самой же функции будем отображать спрятанный изначально с помощью атрибута hidden прогресс-бар с id="imgProgress". Изображения будем формировать с помощью ссылки, позволяющей загрузить фото с определенным id и размером с unsplash.com. Соберем несколько таких фото в массив imgArr, указав в качестве его элементов только их id.

При клике на кнопке "Загрузить изображение" мы будем показывать прогресс-бар и сообщение о том, что идет загрузка, а по окончании загрузки (событие img.onload) мы будем их прятать с помощью свойства hidden.

Нам не нужно в элементе progress указывать атрибут value, т.к. процес загрузки достаточно быстрый.

Попробуйте пример в действии (открыть в новой вкладке):

Увеличение значения определенного прогресс-бара

В примере ниже мы будем увеличивать значение атрибута value определенного прогресс-бара.

Код JavaScript, который управляет элементом <progress>:

Поскольку максимальное значение нашего прогресс-бара max="200", то в функции для получения процентного соотношения мы делим value прогресс-бара на 2.

Пример "вживую":

Используем элемент <progress> при воспроизведении видео

Как правило, в тег <video> в HTML5 добавляют атрибут controls для управления его воспроизведением. Однако у вас может быть видео, которое не имеет такого атрибута, а процесс воспроизведения, тем не менее, хочется отобразить. Вот тут и пригодится элемент <progress>. Его атрибуты value и max будут иметь значения 0 и 100, соответственно, и это мы потом используем в скрипте.

Для всех элементов в разметке мы используем атрибут id для простого обращения к нм в коде JavaScript:

Код JavaScript:

В JavaScript мы обрабатываем событие timeupdate, которое постоянно запускается во время воспроизведения видео. В нем мы рассчитываем процентное значение, используя всю продолжительности видео (video.duration) и video.currentTime (текущее время проигрывания видео).

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

Используем элемент <progress> для загрузки файла с помощью File API

Этот пример связан с использованием элемента<progress> для загрузки файлов, основанной на File API. Вариант кода вы можете посмотреть в спецификации.

Разметка примера:

Как вы видите, мы используем input type="file" для загрузки txt-файла. Кстати, в js-коде мы будем это проверять.

JavaScript-код примера:

В приведенном коде событие progress используется для обновления атрибута value элемента <progress>, а событие load - для отображения результата чтения данных из txt-файла.

Тестируем пример:

Элемент progress для отображения прогресса чтения статьи

Еще один вариант использования прогресс-бара на странице сайта - это отображение прогресса чтения статьи. Как правило, элемент <progress> в этом случае располагается вверху страницы, обычно до или после меню (он даже может быть добавлен непосредственно в скрипте, как в примере ниже). Когда пользователь читает текст статьи, значение атрибута value увеличивается, и прогресс-бар медлено растет слева направо в виде сплошной полосы нужного вам цвета, который назначается в стилях.

CSS-стили для примера:

JavaScript-код

Код этого примера написан с использованием jQuery. Вам сначала нужно будет подключить эту библиотеку, указав к ней путь из локальной папки или с CDN, а затем использовать такой код:

Пример этого прогресс-бара вы увидите в процессе чтения статьи. Надеюсь, что читая эти строки, вы видите, как элемент <progress> приблизился к правому краю вашего браузера.

Резюме

Элемент <progress> можно и нужно использовать для отображения процесса загрузки картинок, чтения статьи, времени решения задачи или загрузки файлов на сервер. Его можно стилизовать, используя псевдоэлементы, и управлять им из JavaScript-кода.

Автор: Админ

Добавить комментарий

Ваш адрес email не будет опубликован.