<progress>: Phần tử Chỉ báo Tiến trình
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Phần tử <progress> trong HTML hiển thị một chỉ báo cho thấy tiến độ hoàn thành của một tác vụ, thường được hiển thị dưới dạng thanh tiến trình.
Try it
<label for="file">File progress:</label>
<progress id="file" max="100" value="70">70%</progress>
label {
padding-right: 10px;
font-size: 1rem;
}
Thuộc tính
Phần tử này bao gồm các thuộc tính toàn cục.
max-
Thuộc tính này mô tả lượng công việc mà tác vụ được biểu thị bởi phần tử
progressyêu cầu. Thuộc tínhmax, nếu có, phải có giá trị lớn hơn0và là một số dấu phẩy động hợp lệ. Giá trị mặc định là1. value-
Thuộc tính này chỉ định lượng tác vụ đã hoàn thành. Nó phải là một số dấu phẩy động hợp lệ trong khoảng từ
0đếnmax, hoặc từ0đến1nếumaxbị bỏ qua. Nếu không có thuộc tínhvalue, thanh tiến trình là không xác định; điều này cho biết một hoạt động đang diễn ra mà không có dấu hiệu về thời gian dự kiến hoàn thành.
Note:
Không giống như phần tử <meter>, giá trị nhỏ nhất luôn là 0 và thuộc tính min không được phép cho phần tử <progress>.
Note:
Pseudo-class :indeterminate có thể được sử dụng để khớp với các thanh tiến trình không xác định. Để thay đổi thanh tiến trình thành không xác định sau khi đã gán giá trị, bạn phải xóa thuộc tính value bằng element.removeAttribute('value').
Khả năng tiếp cận
Gán nhãn
Trong hầu hết các trường hợp, bạn nên cung cấp nhãn dễ tiếp cận khi sử dụng <progress>. Mặc dù bạn có thể sử dụng các thuộc tính gán nhãn ARIA tiêu chuẩn aria-labelledby hoặc aria-label như với bất kỳ phần tử nào có role="progressbar", khi sử dụng <progress> bạn cũng có thể dùng phần tử <label>.
Note: Văn bản được đặt giữa các thẻ của phần tử không phải là nhãn dễ tiếp cận, chỉ được khuyến nghị như một phương án dự phòng cho các trình duyệt cũ không hỗ trợ phần tử này.
Ví dụ
<label>
Uploading Document: <progress value="70" max="100">70 %</progress>
</label>
<!-- OR -->
<br />
<label for="progress-bar">Uploading Document</label>
<progress id="progress-bar" value="70" max="100">70 %</progress>
Kết quả
Mô tả một vùng cụ thể
Nếu phần tử <progress> mô tả tiến trình tải của một phần của trang, hãy sử dụng aria-describedby để trỏ đến trạng thái, và đặt aria-busy="true" trên phần đang được cập nhật, xóa thuộc tính aria-busy khi nó đã tải xong.
Ví dụ
<div aria-busy="true" aria-describedby="progress-bar">
<!-- content is for this region is loading -->
</div>
<!-- ... -->
<progress id="progress-bar" aria-label="Content loading…"></progress>
Kết quả
Ví dụ
<progress value="70" max="100">70 %</progress>
Kết quả
Tóm tắt kỹ thuật
| Danh mục nội dung | Nội dung luồng, nội dung cụm từ, nội dung có thể gán nhãn, nội dung rõ ràng. |
|---|---|
| Nội dung được phép |
Nội dung cụm từ, nhưng không được có phần tử <progress> nào trong số các phần tử con.
|
| Bỏ qua thẻ | Không được bỏ qua, cả thẻ mở và thẻ đóng đều bắt buộc. |
| Phần tử cha được phép | Bất kỳ phần tử nào chấp nhận nội dung cụm từ. |
| Vai trò ARIA ngầm định | progressbar |
| Vai trò ARIA được phép | Không có role nào được phép |
| Giao diện DOM | HTMLProgressElement |
Đặc tả
| Specification |
|---|
| HTML # the-progress-element |