<progress>

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

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

Кратко

Секция статьи "Кратко"

Тег <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;
}

        
        
          
        
      
Открыть демо в новой вкладке