Thẻ HTML <progress>

Nguyen Le Oanh

Định nghĩa và cách sử dụng thẻ <progress>

Thẻ <progress> thể hiện tiến độ hoàn thành của một nhiệm vụ. Ví dụ sau hiển thị thanh tiến trình:

<label for="file">Downloading progress:</label>
<progress id="file" value="32" max="100"> 32% </progress>

Mẹo:

Luôn thêm thẻ <label> để có các phương pháp trợ năng tốt nhất!
Sử dụng thẻ <progress> kết hợp với JavaScript để hiển thị tiến trình của một tác vụ.

Lưu ý: Thẻ <progress> không phù hợp để biểu thị thước đo (ví dụ: mức sử dụng dung lượng ổ đĩa hoặc mức độ liên quan của kết quả truy vấn). Để biểu thị một thước đo, thay vào đó hãy sử dụng thẻ <meter>.

Hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phần tử.

Phần tử <progress>	Google Chrome	MS Edge	Firefox	Safari	Opera
Phần tử <progress>	8.0	10.0	16.0	6.0	11.0

Các thuộc tính

Thuộc tính	Giá trị	Mô tả
max	number	Chỉ định tổng số lượng công việc mà nhiệm vụ yêu cầu. Giá trị mặc định là 1
value	number	Chỉ định bao nhiêu nhiệm vụ đã được hoàn thành