Тег выполнения HTML - httpdoc.ru

HTML Прогресс

<progress> Тег HTML используется для отображения хода выполнения задачи. Он используется для отображения прогресса загрузки файла на веб-страницу.


Атрибуты тега прогресса HTML

Атрибут Описание
value Он определяет объем выполненной задачи.
max Он определяет количество требуемых задач в целом.

Прогресс HTML с максимальным атрибутом

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> HTML Progress Tag </title>	
</head>
<body>

Downloading Progress : 
<progress value="50" max="100"> </progress>

</body>
</html>

Выход

HTML Progress Tag

HTML-анимированная полоса выполнения

Посмотрим на индикатор выполнения без атрибута max и value.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> Progress Tag Without Value and Max Attribute </title>	
</head>
<body>

<progress> </progress>

</body>
</html>

Выход

Progress Tag Without Value and Max Attribute

Прогресс HTML с использованием стиля

Вы можете стилизовать индикатор выполнения с помощью css. Посмотрим, как продвигается CSS.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> HTML Progress with CSS </title>	
<style>
progress{  
  width: 200px;  
  height: 10px;  
}  
</style>
</head>
<body>

<progress></progress>

</body>
</html>

Выход

HTML Progress with CSS

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

Элемент
Microsoft Edge browser.png Край
Chrome browser.png Хром
Firefox browser.png Fire Fox
Opera browser.png Опера
safari browser.png Сафари
<progress>
да
да
да
да
да