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

Thuộc tính Global

Thẻ <progres> cũng hỗ trợ các thuộc tính Global trong HTML.

Thuộc tính sự kiện

Thẻ <progres> cũng hỗ trợ thuộc tính sự kiện trong HTML.

Cài đặt CSS mặc định

Không có.

Chủ Nhật, 08/10/2023 10:29

5 ★ 1 👨 360

Bạn nên đọc

Xác thực tài khoản!

Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:

Số điện thoại chưa đúng định dạng!