<progress>

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

В тег по умолчанию встроена роль progressbar, которая делает загрузку «живой» областью. Это область страницы, об изменениях в которой пользователи скринридеров узнают автоматически, без перехода к ней.

Прогресс-бар с известным максимальным значением:

        
          
          <label for="progress">Загрузка файла</label><progress id="progress" value="0" max="100"></progress>
          <label for="progress">Загрузка файла</label>
<progress id="progress" value="0" max="100"></progress>

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

Задача выполняется, но неизвестно, сколько займёт времени. В примере связываем прогресс-бар с фидом, где обновляется содержимое, при помощи атрибута aria-describedby.

        
          
          <div role="feed" aria-busy="true" aria-describedby="progress">  <!-- Содержимое, которое сейчас обновляется --></div><progress id="progress" aria-label="Фид обновляется"></progress>
          <div role="feed" aria-busy="true" aria-describedby="progress">
  <!-- Содержимое, которое сейчас обновляется -->
</div>

<progress id="progress" aria-label="Фид обновляется"></progress>

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

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

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

Специальные атрибуты <progress>:

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

Минимальное значение min всегда равно 0, и этот атрибут нельзя задавать <progress>.

Чтобы прогресс-бар был полностью доступен для всех пользователей, изменяйте значение value при помощи JavaScript. В этом случае скринридеры расскажут о процессе загрузки в процентах или с помощью особого звукового оповещения.

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

Также не забывайте подписывать, что сейчас загружается. Для видимой подписи используйте тег <label>, а для видимой только пользователям вспомогательных технологий — aria-label.

        
          
          <!-- Подпись с <label> --><label for="progress">Загрузка файла</label><progress id="progress" value="0" max="100"></progress><label>  Загрузка файла <progress id="progress" value="0" max="100"></progress></label><!-- Подпись с aria-label --><progress  id="progress"  value="0"  max="100"  aria-label="Загрузка файла"></progress>
          <!-- Подпись с <label> -->
<label for="progress">Загрузка файла</label>
<progress id="progress" value="0" max="100"></progress>

<label>
  Загрузка файла <progress id="progress" value="0" max="100"></progress>
</label>

<!-- Подпись с aria-label -->
<progress
  id="progress"
  value="0"
  max="100"
  aria-label="Загрузка файла"
>
</progress>

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

На практике

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

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

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

🛠 Внешний вид элемента <progress> может быть разным — это зависит от браузера и операционной системы устройства пользователя. Стандартный прогресс-бар на устройствах с macOS и Windows имеет голубую заливку в Chrome, Safari и Firefox. Только Edge использует серый цвет. Сильнее всего элемент отличается в Safari. Он гораздо уже остальных.

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

        
          
          progress {  border: none;  background-color: #FF8630;}
          progress {
  border: none;
  background-color: #FF8630;
}

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

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

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

        
          
          progress::-moz-progress-bar {  border: none;  background-color: #FF8630;}progress::-webkit-progress-bar {  border: none;  background-color: #FF8630;}progress::-webkit-progress-value {  background-color: #FF8630;}
          progress::-moz-progress-bar {
  border: none;
  background-color: #FF8630;
}

progress::-webkit-progress-bar {
  border: none;
  background-color: #FF8630;
}

progress::-webkit-progress-value {
  background-color: #FF8630;
}

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

+ Развернуть