ProgressEvent

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Note: This feature is available in Web Workers.

The ProgressEvent interface represents events measuring progress of an underlying process, like an HTTP request (for an XMLHttpRequest, or the loading of the underlying resource of an <img>, <audio>, <video>, <style> or <link>).

Event ProgressEvent

Constructor

ProgressEvent()

Creates a ProgressEvent event with the given parameters.

Instance properties

Also inherits properties from its parent Event.

ProgressEvent.lengthComputable Read only

A boolean flag indicating if the ratio between the size of the data already transmitted or processed (loaded), and the total size of the data (total), is calculable. In other words, it tells if the progress is measurable or not.

ProgressEvent.loaded Read only

A 64-bit unsigned integer indicating the size, in bytes, of the data already transmitted or processed. The ratio can be calculated by dividing ProgressEvent.total by the value of this property. When downloading a resource using HTTP, this only counts the body of the HTTP message, and doesn't include headers and other overhead. Note that for compressed requests of unknown total size, loaded might contain the size of the compressed, or decompressed, data, depending on the browser. As of 2024, it contains the size of the compressed data in Firefox, and the size of the uncompressed data in Chrome.

ProgressEvent.total Read only

A 64-bit unsigned integer indicating the total size, in bytes, of the data being transmitted or processed. When downloading a resource using HTTP, this value is taken from the Content-Length response header. It only counts the body of the HTTP message, and doesn't include headers and other overhead.

Instance methods

Inherits methods from its parent, Event.

Examples

The following example adds a ProgressEvent to a new XMLHTTPRequest and uses it to display the status of the request.

js
const progressBar = document.getElementById("p"),
  client = new XMLHttpRequest();
client.open("GET", "magical-unicorns");
client.onprogress = (pe) => {
  if (pe.lengthComputable) {
    progressBar.max = pe.total;
    progressBar.value = pe.loaded;
  }
};
client.onloadend = (pe) => {
  progressBar.value = pe.loaded;
};
client.send();

Specifications

Specification
XMLHttpRequest
# interface-progressevent

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
ProgressEvent
ProgressEvent() constructor
lengthComputable
loaded
total
Available in workers

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support

See also

  • The Event base interface.