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>
Пример
<!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-анимированная полоса выполнения
Посмотрим на индикатор выполнения без атрибута 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>
Выход
Прогресс 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>
Выход
Поддержка браузера
|
![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|---|
<progress>
|
|
|
|
|
|