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="https://developer.mozilla.org/en-US/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="https://developer.mozilla.org/en-US/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.
Update compatibility data on GitHub
Desktop | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Basic support | Chrome Full support 1 | Edge Full support Yes | 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 | Edge Mobile 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 ? | Firefox Full support 22 | IE No support No | Opera No support No | Safari No support No | WebView Android ? | Chrome Android No support No | Edge Mobile ? | Firefox Android Full support 22 | Opera Android No support No | Safari iOS No support No | Samsung Internet Android ? |
lengthComputable | Chrome Full support 50 | Edge Full support Yes | 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 | Edge Mobile Full support Yes | Firefox Android Full support 4 | Opera Android Full support 37 | Safari iOS Full support 2 | Samsung Internet Android ? |
loaded | Chrome No support No | Edge Full support Yes | Firefox Full support 3.5 | IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Edge Mobile Full support Yes | Firefox Android Full support 4 | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
total | Chrome No support No | Edge Full support Yes | Firefox Full support 3.5 | IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Edge Mobile Full support Yes | Firefox Android Full support 4 | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
initProgressEvent | Chrome No support 1 — 17 | Edge Full support Yes | 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 ? — ? | Edge Mobile Full support Yes | Firefox Android No support 4 — 22 | Opera Android No support ? — 15 | Safari iOS No support ? — ? | Samsung Internet Android No support No |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
- 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.
Document Tags and Contributors
Tags:
Contributors to this page:
mfluehr,
ddbeck,
connorshea,
jpmedley,
DomenicDenicola,
abbycar,
Sebastianz,
fscholz,
teoli
Last updated by:
mfluehr,