The ProgressEvent interface represents events measuring the progress of an underlying process, like an HTTP request or the loading of the underlying resource of an img, audio, video, or link.
Syntax:
ProgressEvent.lengthComputable|loaded|total
Return Value: It returns a string value that represents the lengthComputable, loaded, or total measurement of progress.
Properties: Properties of ProgressEvent are inherited from its parent event.
- ProgressEvent.lengthComputable: It is a read-only property and contains a Boolean flag indicating the resource concerned by the ProgressEvent has a length that can be calculated.
- ProgressEvent.loaded: It is a read-only property containing an integer representing the amount of work already performed by the underlying process. The ratio of work done can be calculated with the property and ProgressEvent.total. When you are downloading a resource by using HTTP, this will only represent the part of the content itself, not the headers and other overhead.
- ProgressEvent.total: It is a read-only property that represents the total amount of work that the underlying process is in the progress of performing. When you are downloading a resource by using HTTP, this will only represent the part of the content itself, not the headers and other overhead.
Event Types:
- onerror: The event occurs when an error occurs while loading an external file
- onloadstart: The event will occur when the browser will start looking for the specified media.
Example: In this example, we will use the DOM ProgressEvent
HTML
<!DOCTYPE html><html>
<head>
<title>DOM ProgressEvent</title>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
Progress Bar:
<progress id="geeks"
style="width:400px;">
</progress>
<script>
let progressBar = document.getElementById("geeks"),
client = new XMLHttpRequest();
client.open("GET", "magical-unicorns");
client.onprogress = function (pe) {
if (pe.lengthComputable) {
progressBar.max = pe.total;
progressBar.value = pe.loaded;
}
}
client.onloadend = function (pe) {
progressBar.value = pe.loaded;
}
client.send();
</script>
</body>
</html>
|
Output:
Supported Browsers: The browser supported by DOM ProgressEvent are listed below:
- Chrome 1.0
- Internet Explorer 9.0
- Firefox
- Safari
- Opera
Article Tags :
Recommended Articles