HTML Tutorial
The <progress>
tag represents the progress of a task or operation.
<!-- Default progress bar -->
<progress></progress>
<!-- Progress bar with a label -->
<progress value="50" label="Loading"></progress>
<!-- Progress bar with a maximum value -->
<progress max="100" value="50"></progress>
Simple HTML Example:
<!DOCTYPE html>
<html>
<head>
<title>Exploring the <progress> Tag</title>
</head>
<body>
<h1>Progress Bar Example</h1>
<!-- A simple progress bar with a label -->
<progress value="50" label="Loading"></progress>
<br>
<!-- A progress bar with a maximum value -->
<progress max="100" value="25"></progress>
</body>
</html>
aria-valuemin
and aria-valuemax
attributes to specify the minimum and maximum values of the progress bar for screen readers.label
attribute to identify the purpose of the progress bar.