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 inWeb Workers.

TheProgressEvent interface represents events that measure the progress of an underlying process, like an HTTP request (e.g., anXMLHttpRequest, or the loading of the underlying resource of an<img>,<audio>,<video>,<style> or<link>).

Constructor

ProgressEvent(): Creates aProgressEvent event with the given parameters.

Instance properties

Also inherits properties from its parentEvent.

ProgressEvent.lengthComputableRead 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.loadedRead only: A number indicating the size of the data already transmitted or processed.For aProgressEvent dispatched by the browser in HTTP messages, the value refers to the size, in bytes, of the message body, excluding headers and other overhead.In compressed messages of unknown total size,loaded might refer to the size of the compressed or uncompressed data, depending on the browser.As of 2024, it contains the size of the compressed data in Firefox, and the uncompressed data in Chrome.In aProgressEvent you create yourself, you can assign any numeric value toloaded that represents the amount of work completed relative to thetotal value.
ProgressEvent.totalRead only: A number indicating the total size of the data being transmitted or processed.ForProgressEvents dispatched by the browser in HTTP messages, the value refers to the size, in bytes, of a resource and is derived from theContent-Length header.In aProgressEvent you create yourself, you may wish to normalizetotal to a value such as100 or1 if revealing the precise amount of bytes of a resource is a concern.If using1 as a total, for example, thenloaded would be a decimal value between0 and1.

Instance methods

Inherits methods from its parent,Event.

Examples

Showing the status of a request

The following example adds aProgressEvent to a newXMLHttpRequest and uses it to display the status of the request.

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();

Using fractions in a ProgressEvent

The total number of bytes of a resource may reveal too much information about a resource, so a number between 0 and 1 may be used in aProgressEvent() instead:

function updateProgress(loaded, total) {  const progressEvent = new ProgressEvent("progress", {    lengthComputable: true,    loaded,    total,  });  document.dispatchEvent(progressEvent);}document.addEventListener("progress", (event) => {  console.log(`Progress: ${event.loaded}/${event.total}`);});updateProgress(0.123456, 1);