Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM ProgressEvent

  • Last Updated : 12 Jul, 2019

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 which represent the lengthComputable, loaded or total measurement of a 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 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 which 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 occurs when the browser will starts looking for the specified media.

Example:




<!DOCTYPE html>
<html>
  
<head>
    <title>DOM ProgressEvent</title>
</head>
  
<body>
    <center>
        <h1 style="color:green;">GeeksforGeeks</h1
          
        Progress Bar:
        <progress id="geeks" style="width:400px;"></progress>
  
        <script>
            var 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>
    </center>
</body>
  
</html>                    

Output:

Supported Browsers: The browser supported by DOM ProgressEvent are listed below:

  • Chrome 1.0
  • Internet Explorer 9.0
  • Firefox
  • Safari
  • Opera

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :