Cách tạo thanh tiến trình (progress bar) trong HTML?

Thẻ <progress> (HTML5) hiển thị tiến trình hoàn thành tác vụ. Giá trị: value (đã làm), max (tổng). Có thể cập nhật bằng JS.

Thuộc tính

Thuộc tính	Giá trị	Mô tả
value	Number (0 - max)	Tiến trình hiện tại
max	Number > 0	Tổng công việc (mặc định 1)

Ví dụ

<!DOCTYPE html>
<html>
  <head>
    <title>Thẻ progress HTML</title>
  </head>
  <body>
    <h1>Đang tải...</h1>
    <progress value="65" max="100"></progress>
    <p>65%</p>
  </body>
</html>

Cập nhật bằng JavaScript

<progress id="pg" max="100" value="0"></progress>
<script>
  let val = 0;
  const timer = setInterval(() => {
    val += 5;
    document.getElementById('pg').value = val;
    if (val >= 100) clearInterval(timer);
  }, 200);
</script>

Progress vs Meter

<progress>	<meter>
Tiến trình hoàn thành (có hướng)	Đo lường giá trị trong phạm vi (disk usage, score...)
value từ 0 → max	min, max, low, high, optimum

Style CSS

progress { width: 100%; height: 20px; }
progress::-webkit-progress-bar { background: #eee; }
progress::-webkit-progress-value { background: #007bff; }
progress::-moz-progress-bar { background: #007bff; }