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- 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- A 64-bit unsigned integer value indicating the amount of work already performed by the underlying process. The ratio of work done can be calculated by dividing
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. ProgressEvent.total
Read only- A 64-bit unsigned integer representing the total amount of work that the underlying process is in the progress of performing. When downloading a resource using HTTP, this is the
Content-Length
(the size of the body of the message), and doesn't include the 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 |
XMLHttpRequestThe 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 | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
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 |
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.
ProgressEvent by Mozilla Contributors is licensed under CC-BY-SA 2.5.