/ ↲
    Расширенный поиск

    HTML

    <progress>

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

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

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

    Кратко

    Скопировано

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

    Пример

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

    Как понять

    Скопировано

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

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

    Как пишется

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

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

    На практике

    Скопировано

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

    Скопировано

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

    Внешний вид прогресс-бара в 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;
}
    Открыть демо в новой вкладке

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