Cách hiển thị tiến độ hoàn thành tác vụ trong HTML5

Dùng thẻ <progress> trong HTML5 để hiển thị tiến độ hoàn thành tác vụ. Giúp tạo thanh tiến trình (progress bar). Các thuộc tính:

Thuộc tính	Giá trị	Mô tả
max	number > 0	Giá trị tối đa, số thực dương hợp lệ
value	number	Đã hoàn thành bao nhiêu. Số thực từ 0 đến max (hoặc 0-1 nếu không có max)

Ví dụ

Bạn có thể chạy mã sau để tạo thanh tiến trình:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Progress Tag</title>
  </head>
  <body>
    <h2>Mức nước</h2>
    <progress value="60" max="100"></progress>
  </body>
</html>

Lưu ý: <progress> đại diện cho tiến trình hoàn thành tác vụ. Dùng <meter> cho gauge (đồng hồ đo) giá trị trong phạm vi biết trước. Có thể cập nhật value bằng JavaScript để animate progress bar.