An element that displays the progress status for tasks that take a long time.

Description

An element that displays the progress status for tasks that take a long time.

A progressbar indicates that the user’s request has been received and the application is making progress toward completing the requested action. The author SHOULD supply values for aria-valuenow, aria-valuemin, and aria-valuemax, unless the value is indeterminate, in which case the author SHOULD omit the aria-valuenow attribute. Authors SHOULD update these values when the visual progress indicator is updated. If the progressbar is describing the loading progress of a particular region of a page, the author SHOULD use aria-describedby to point to the status, and set the aria-busy attribute to true on the region until it is finished loading. It is not possible for the user to alter the value of a progressbar because it is always readonly.

Note: Assistive technologies generally will render the value of aria-valuenow as a percent of a range between the value of aria-valuemin and aria-valuemax, unless aria-valuetext is specified. It is best to set the values for aria-valuemin, aria-valuemax, and aria-valuenow in a manner that is appropriate for this calculation.

Example

HTML Example

<div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" />

HTML5 Example

<!DOCTYPE html>
<html>
<head><title>Gracefully degrading progress bar</title></head>
<body>
<progress id="progress-bar" value="0" max="100">0% complete</progress>
<button id="update-button">Update</button>
</body>
</html>
Supporting JavaScript

… and here is the JavaScript code that will ensure the progress bar still works in older browsers:

var progressBar = document.getElementById("progress-bar");

// Check to see if the browser supports the HTML5 <progress> tag.
var supportsHTML5Progress = (typeof (HTMLProgressElement) !== "undefined");

function setupProgress() {
if (!supportsHTML5Progress) {
// HTML5 <progress> isn't supported in this browser, so we need to add
// ARIA roles and states to the element.
progressBar.setAttribute("role", "progressbar");
progressBar.setAttribute("aria-valuemin", 0);
progressBar.setAttribute("aria-valuemax", 100);
}
}

function updateProgress(percentComplete) {
if (!supportsHTML5Progress) {
// HTML5 <progress> isn't supported by this browser,
// so we need to update the aria-valuenow attribute
progressBar.setAttribute("aria-valuenow", percentComplete);
} else {
// HTML5 <progress> is supported, so update the value attribute instead.
progressBar.setAttribute("value", percentComplete);
}

progressBar.textContent = percentComplete + "% complete";
}

function initDemo() {
setupProgress(); // Setup the progress bar.

// Bind a click handler to the button, which will update the progress bar to 75%.
document.getElementById("update-button").addEventListener("click", function (e) {
updateProgress(75);
e.preventDefault();
}, false);
}
initDemo();

HTML Example 2

<progress role="progressbar" value="25" max="100">25%</progress>

Characteristics

Superclass Role

range

Related Concepts

status

Inherited States and Properties

aria-atomic
aria-busy (state)
aria-controls
aria-current (state)
aria-describedby
aria-details
aria-disabled (state)
aria-dropeffect
aria-errormessage
aria-expanded (state)
aria-flowto
aria-grabbed (state)
aria-haspopup
aria-hidden (state)
aria-invalid (state)
aria-keyshortcuts
aria-label
aria-labelledby
aria-live
aria-owns
aria-relevant
aria-roledescription
aria-valuemax
aria-valuemin
aria-valuenow
aria-valuetext

Name From

author

Accessible Name Required

True

Children Presentational

True

Semantic HTML

Use the HTML5 <progress> tag.

<progress value="70" max="100">70 %</progress>

Reference

W3C (opens new window)