ProgressEvent: ProgressEvent() constructor

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨August 2016⁩.

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

Note: This feature is available inWeb Workers.

TheProgressEvent() constructor returns a newProgressEvent object, representing the current completion of a long process.

Syntax

new ProgressEvent(type)new ProgressEvent(type, options)

Parameters

type

A string with the name of the event.It is case-sensitive and browsers set it toloadstart,progress,abort,error,load,timeout, orloadend.

optionsOptional

An object that,in addition of the properties defined inEvent(), can have the following properties:

lengthComputableOptional: A boolean value indicating if the total work to be done, and the amount of work already done, by the underlying process is calculable.In other words, it tells if the progress is measurable or not.It defaults tofalse.
loadedOptional: A number representing the amount of work already performed by the underlying process.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 aProgressEvent you create yourself, you can assign any numeric value toloaded that represents the amount of work completed relative to thetotal value.It defaults to0.
totalOptional: 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 response 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 should be a decimal value between0 and1.It defaults to0.

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(50, 100);

Using fractions in a ProgressEvent

The total number of bytes of a resource may reveal too much information about a download, so a number between 0 and 1 may be used 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);