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>