progress

 .gradient-progressbar progress < appearance: none; -moz-appearance: none; -webkit-appearance: none; border: none; margin-top: 10px; background: #eee; border: 0; width: 100%; height: 25px; border-radius: 9px; color: #9c3; >.gradient-progressbar progress::-webkit-progress-bar < background: #eeeeee; border-radius: 9px; >.gradient-progressbar progress::-webkit-progress-value < background: linear-gradient(to bottom, #cf9 0%, #9c3 100%); border-radius: 9px; >.gradient-progressbar progress::-moz-progress-bar 
Выполнено 50% работы 

Источник

Создание и стилизация индикатора выполнения в HTML5

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

В этой статье мы обсудим, как добавить этот элемент в документ, задать ему стиль через CSS и сделать анимацию прогресса.

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

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

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

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

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

Тем не менее, в браузерах имеются небольшие отличия. В Firefox стили применяются к самому индикатору, в то время как стиль бегунка не меняется.

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

Итак, нам нужно что-то ещё в таком случае.

В Chrome и Safari элемент расшифровывается следующим образом.

 ┗ ::-webkit-progress-bar ┗ ::-webkit-progress-value

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

progress::-webkit-progress-bar < /* стилевые правила */ >progress::-webkit-progress-value < /* стилевые правила */ >

У Firefox также есть специальный псевдокласс ::-moz-progress-bar . В отличие от Chrome и Safari, этот псевдокласс в Firefox относится к бегунку.

Окончательно собираем эти селекторы вместе для стилизации индикатора выполнения.

progress < /* стилевые правила */ >progress::-webkit-progress-bar < /* стилевые правила */ >progress::-webkit-progress-value < /* стилевые правила */ >progress::-moz-progress-bar < /* стилевые правила */ >

Анимация прогресса

Далее мы увидим как анимировать индикатор. Как правило, бегунок растёт слева направо по мере прогресса задачи. Идея состоит в том, бегунок будет расти от 0 и остановится, как только достигнет максимального значения. Будем также отображать значение числа по мере продвижения бегунка. Ниже приводится структура HTML.

В данном примере для анимации индикатора мы будем использовать jQuery, так что не забудьте вставить jQuery таким образом.

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

var progressbar = $('#progressbar'), max = progressbar.attr('max'), value = progressbar.val(), time = (1000/max)*5;

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

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

Затем добавим полученный результат в индикатор.

addValue = progressbar.val(value);

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

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

setInterval(function() < loading(); >, time);

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

Сохраним вышеприведённую функцию в переменной.

var animate = setInterval(function() < loading(); >, time);

Затем внутри переменной loading добавляем условный оператор.

Как только значение равно максимальному значению, выполняется функция clearInterval , которая останавливает анимацию.

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

Поддержка браузеров

Согласно CanIUse.com, элемент полностью поддерживается в следующих браузерах: Firefox 16+, Chrome 8+, Safari 6+ и Opera 11+.

Что ещё почитать

Ниже приведено несколько хороших ссылок, чтобы покопаться в этом элементе дальше.

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Популярные материалы

• Самоучитель HTML4
• Самоучитель CSS
• Как добавить картинку на веб-страницу?
• Спецсимволы
• Структура HTML-кода
• Введение в HTML
• Способы добавления стилей на страницу
• Выравнивание текста
• Якоря
• Как добавить иконку сайта в адресную строку браузера?
• Позиционирование элементов
• Ссылки

Источник

Тег прогресс бар html

Элемент, который показывает ход выполнения задачи.

Время чтения: меньше 5 мин

Обновлено 24 августа 2022

Кратко

Скопировать ссылку «Кратко» Скопировано

Тег создаёт индикатор выполнения задачи. Обычно выглядит как прогресс-бар.

Пример

Скопировать ссылку «Пример» Скопировано

 
Подождите, пожалуйста, файл загружается  p>Подождите, пожалуйста, файл загружаетсяp> progress value="30" max="100">progress>    Скопировать Скопировано Не удалось скопировать   

Как понять

Скопировать ссылку «Как понять» Скопировано

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

Если пользователю надо показать числовое значение в заданном диапазоне, лучше использовать тег .

• сообщить о количестве свободного места на диске;
• вывести допустимые пределы громкости;
• показать уровень загруженности интернет-канала.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

• max — максимальное значение. Должно быть положительным, допускаются дробные значения. По умолчанию равно 1.
• value — текущее значение. Положительное число, допускаются дробные значения. Должно находится в пределах между 0 и значением атрибута max . Также его можно менять при помощи JavaScript. Если атрибут не прописан, то линия внутри прогресс-бара будет перемещаться от одного края к другому, показывая, что задача выполняется, но не известно, сколько это займёт времени.

На практике

Скопировать ссылку «На практике» Скопировано

Борис Демченко советует

Скопировать ссылку «Борис Демченко советует» Скопировано

🛠 Внешний вид элемента может быть разным — это зависит от браузера и операционной системы устройства пользователя. Вот так стандартный прогресс-бар будет выглядеть на устройствах с macOS и Windows:

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

 progress  border: none; background-color: #5068f6;> progress  border: none; background-color: #5068f6; >    Скопировать Скопировано Не удалось скопировать   

Но в Firefox эти стили не затронут бегунок, поэтому дополнительно потребуется использовать вендорный префикс -moz . А вот для стилизации в Chrome и Safari как самого элемента, так и его бегунка, необходимо использовать префиксы -webkit .

Поэтому для того, чтобы прогресс-бар и бегунок выглядели одинаково во всех основных браузерах, нам потребуется добавить следующие правила:

 progress::-moz-progress-bar  border: none; background-color: #5068f6;> progress::-webkit-progress-bar  border: none; background-color: #5068f6;> progress::-webkit-progress-value  background-color: #5068f6;> progress::-moz-progress-bar  border: none; background-color: #5068f6; > progress::-webkit-progress-bar  border: none; background-color: #5068f6; > progress::-webkit-progress-value  background-color: #5068f6; >    Скопировать Скопировано Не удалось скопировать   

Источник

Тег прогресс бар html

Используется для отображения прогресса завершенности задачи. Изменение значения происходит через JavaScript.

Синтаксис

Атрибуты

Закрывающий тег

HTML 5 IE 10 Cr Op Sa 5.2 Fx

      
Пожалуйста, подождите, фотографии загружаются.
 Загружено на   

Результат примера в браузере Opera показан на рис. 1.

Статьи по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Типы тегов

HTML5

Блочные элементы

Строчные элементы

Универсальные элементы

Нестандартные теги

Осуждаемые теги

Видео

Документ

Звук

Изображения

Объекты

Скрипты

Списки

Ссылки

Таблицы

Текст

Форматирование

Формы

Фреймы

Источник