Разное

Html progress: Тег | htmlbook.ru

10.04.2021

| WebReference

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

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

Синтаксис

<progress value="<число>" max="<число>">
Текст
</progress>

Атрибуты

value
Текущее значение прогресса.
max
Максимальное значение прогресса.

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>progress</title> </head> <body> <p>Пожалуйста, подождите, фотографии загружаются.</p> <progress max=»100″ value=»25″> Загружено на <span>25</span>% </progress> </body> </html>

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

Использование <progress>

Спецификация

СпецификацияСтатус
WHATWG HTML Living StandardЖивой стандарт
HTML5Рекомендация
Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

10126115. 26
2.26117
Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузреа, начиная с которой элемент поддерживается.

См. также

  • Продвинутая семантика и доступность
  • Шкала прогресса

Элементы HTML

Атрибуты

Значения

Типы элементов

Аудио и видео

Документ

Изображения

Объекты

Скрипты

Списки

Ссылки

Таблицы

Текст

Формы

Фреймы

— HTML — Дока

  1. Кратко
  2. Пример
  3. Как понять
  4. Как пишется
  5. На практике
    1. Борис Демченко советует

Кратко

Скопировано

Тег <progress> создаёт индикатор выполнения задачи.

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

Пример

Скопировано

<p>Подождите, пожалуйста, файл загружается</p><progress value="30" max="100"></progress>
          <p>Подождите, пожалуйста, файл загружается</p>
<progress value="30" max="100"></progress>

Как понять

Скопировано

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

💡

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

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

Как пишется

Скопировано

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

К тегу <progress> применимы все глобальные атрибуты.

На практике

Скопировано

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

Скопировано

🛠 Внешний вид элемента <progress> может быть разным — это зависит от браузера и операционной системы устройства пользователя. Вот так стандартный прогресс-бар будет выглядеть на устройствах с 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;
}
Открыть демо в новой вкладке

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так.

Попробуйте ещё раз?

←

<object>

alt + ←

→

<canvas>

alt + →

HTML-тег прогресса

❮ Предыдущий Полный справочник HTML Далее ❯


Пример

Показать индикатор выполнения:


32%

Попробуйте сами »

Определение и использование

Тег представляет выполнение задачи.

Совет: Всегда добавляйте тег

Советы и примечания

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

Примечание : Тег не подходит для представления датчика (например, использование дискового пространства или релевантность результата запроса). Чтобы представить калибр, вместо этого используйте тег .

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

Числа в таблице указывают первую версию браузера, которая полностью поддерживает элемент.

Элемент
<прогресс> 8,0 10,0 16,0 6,0 11,0

Атрибуты

Атрибут Значение Описание
макс. номер Указывает, сколько работы требуется задаче в целом. Значение по умолчанию 1
значение номер Указывает, какая часть задачи выполнена

Глобальные атрибуты

Тег также поддерживает глобальные атрибуты в HTML.

Атрибуты событий

Тег также поддерживает атрибуты событий в HTML.

Связанные страницы

Ссылка HTML DOM: Progress Object

Настройки CSS по умолчанию

Нет.

❮ Предыдущий Полный справочник HTML Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебник HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3.CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery

31 HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

3 Top1s Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3. CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

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

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools использует W3.CSS.

элемент прогресса | Могу ли я использовать… Таблицы поддержки для HTML5, CSS3 и т. д.

Могу ли я использовать

Поиск

?

элемент прогресса

— ЛС

  • Глобальное использование
    98,82% + 0,01% «=» 98,83%

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

Chrome
  1. 4 — 7: Not supported
  2. 8 — 109: Supported
  3. 110: Supported
  4. 111 — 113: Supported
Edge
  1. 12 — 109: Supported
  2. 110: Supported
Safari
  1. 3.1 — 5.1: Not supported
  2. 6 ​​- 16.2: Supported
  3. 16.3: Supported
  4. 16.4 — TP: Supported
Firefox
  1. 2 — 5: Not supported
  2. 6 — 109: Supported
  3. 81% — Supported»> 110: поддержан
  4. 111 — 112: Поддерживается
Opera
  1. 9 — 10,6: не поддерживается
  2. 11 — 94: поддержан
  3. 9 95: не поддерживается
      4. 121212921212921211113011301130113013013013013013013013013130130130130131301313013130131301313013130131130 29213.
    1. 10: Поддержано
    2. 11: Поддержано
    Chrome для Android
    1. 110: поддержан
    Safari на IOS
    1. 3,2 -6,1: 6.1: НЕТ ОПОСБО0287 8 — 16.2: Supported
    2. 16.3: Supported
    3. 16.4: Supported
    Samsung Internet
    1. 95% — Supported»> 4 — 19.0: Supported
    2. 20: Supported
    Opera Mini
    1. all: Supported
    Opera Mobile
    1. 10: не поддерживается.0131
      1. 2.1 — 4.3: не поддерживается
      2. 4.4 — 4.4.4: Поддерживается
      3. 109: поддержан
      Firefox для Android
      1. 110: поддерживает
        2. 31
        1. 110: Браузер
          1. 13,18: Поддержано
          KAIOS BROWSER
          1. 2,5: Поддержано
          2. 3: Поддержанный
          РЕСУРСА:
          63636363.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *