HTML | DOM ProgressEvent

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right


Output:

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

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

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.