<progress> : Progress Indicator element

by

Introduction

The <progress> element in HTML is used to create a progress bar or progress indicator. It represents the completion progress of a task or an event. The progress bar can be determinate, meaning the progress is measurable and known, or indeterminate, meaning the progress is ongoing and the completion time is unknown.

Here’s an example of how it can be used:

<!DOCTYPE html>
<html>
<head>
    <title>Progress Bar Example</title>
</head>
<body>
    <h2>File Upload Progress</h2>
    <progress value="50" max="100"></progress>
</body>
</html>

Output :

In this example, the progress bar is set to 50% completion (value="50" out of max="100"). This progress bar will be static and won’t change unless you modify its attributes directly in the HTML code. Typically, JavaScript is used to dynamically update the progress bar based on events or calculations. If you want dynamic behavior without scripting, you would need to use server-side technologies to generate the HTML with the appropriate progress value.

Leave a Comment