Thẻ <progress> trong HTML

- Thẻ <progress> được dùng để tạo phần tử có ý nghĩa giống như là một "thanh tiến trình"

- Ví dụ: Bên dưới là một phần tử <progress> dùng để minh họa cho một thanh tiến trình đã được hoàn thành khoảng 85% công việc.

- Cú pháp:

<progress max="number" value="number"></progress>

- Trong đó:

Thuộc tính	Chức năng
max	Xác định tổng khối lượng công việc
value	Xác định khối lượng công việc đã hoàn thành

Ví dụ:

<!DOCTYPE html>
<html>
<body>
    <progress max="100" value="85"></progress>
</body>
</html>

Xem ví dụ

Ví dụ:

- Sử dụng kết hợp với JavaScript để tạo một thanh tiến trình động

<!DOCTYPE html>
<html>
<body>
    <progress max="10" value="0" id="tientrinh"></progress>
    <button onclick="myFunction()">Bắt đầu</button>
    <script>
        var i = 1;
        function myFunction() {     
            setTimeout(function () {   
                document.getElementById("tientrinh").value = i;    
                i++;                 
                if (i <= 10) {         
                    myFunction();           
                }                      
            }, 1000)
        }
    </script>
</body>
</html>

Xem ví dụ