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>
).
<div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveAspectRatio="xMinYMin meet"><a xlink:href="/docs/Web/API/Event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#D4DDE4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#D4DDE4"/><a xlink:href="/docs/Web/API/ProgressEvent" target="_top"><rect x="116" y="1" width="130" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text x="181" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">ProgressEvent</text></a></svg></div>
a:hover text { fill: #0095DD; pointer-events: all;}
Constructor
ProgressEvent()
- Creates a
ProgressEvent
event with the given parameters.
Properties
Also inherits properties from its parent Event
.
ProgressEvent.lengthComputable
Read only- Is a
Boolean
flag 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. ProgressEvent.loaded
Read only- Is an
unsigned long long
representing the amount of work already performed by the underlying process. The ratio of work done can be calculated with the property andProgressEvent.total
. When downloading a resource using HTTP, this only represent the part of the content itself, not headers and other overhead. ProgressEvent.total
Read only- Is an
unsigned long long
representing the total amount of work that the underlying process is in the progress of performing. When downloading a resource using HTTP, this only represent the content itself, not headers and other overhead.
Methods
Also inherits methods from its parent Event
.
ProgressEvent.initProgressEvent()
- Initializes a
ProgressEvent
created using the deprecatedDocument.createEvent("ProgressEvent")
method.
Examples
The following example adds a ProgressEvent
to a new XMLHTTPRequest
and uses it to display the status of the request.
var progressBar = document.getElementById("p"), 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()
Specifications
Specification | Status | Comment |
---|---|---|
XMLHttpRequest The definition of 'ProgressEvent' in that specification. |
Living Standard |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
ProgressEvent | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 3.5 | IE Full support 10 | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
ProgressEvent() constructor | Chrome Full support Yes | Edge Full support ≤79 | Firefox Full support 22 | IE No support No | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 22 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
initProgressEvent | Chrome No support 1 — 17 | Edge No support 12 — 79 | Firefox No support 3.5 — 22 | IE Full support 10 | Opera No support ? — 15 | Safari No support ? — ? | WebView Android No support No | Chrome Android No support ? — ? | Firefox Android No support 4 — 22 | Opera Android No support ? — 14 | Safari iOS No support ? — ? | Samsung Internet Android No support No |
lengthComputable | Chrome Full support 50 | Edge Full support 12 | Firefox Full support 3.5 | IE Full support Yes | Opera Full support 37 | Safari Full support 3.1 | WebView Android Full support 50 | Chrome Android Full support 50 | Firefox Android Full support 4 | Opera Android Full support 37 | Safari iOS Full support 2 | Samsung Internet Android Full support 5.0 |
loaded | Chrome Full support Yes | Edge Full support 12 | Firefox Full support 3.5 | IE No support No | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
total | Chrome Full support Yes | Edge Full support 12 | Firefox Full support 3.5 | IE No support No | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support
- No support
- No support
- Non-standard. Expect poor cross-browser support.
- Non-standard. Expect poor cross-browser support.
- Deprecated. Not for use in new websites.
- Deprecated. Not for use in new websites.
See also
- The
Event
base interface.