×

Cách sử dụng thẻ <progress> để hiển thị tiến trình trong HTML

Avatar of admin
admin 0 Views

Khi tạo các trang web hiện đại, việc hiển thị tiến trình thực hiện một công việc nào đó đến người dùng là vô cùng quan trọng. Thẻ <progress> trong HTML là công cụ hiệu quả để thực hiện điều này. Thẻ này cho phép bạn biểu diễn số liệu của một nhiệm vụ đã hoàn thành như tải xuống tệp, tải trang, hoặc bất kỳ công việc nào có tiến trình đáng chú ý.

Cấu trúc cơ bản của thẻ <progress>

Thẻ <progress> có thể được sử dụng dễ dàng chỉ với vài dòng mã HTML. Dưới đây là ví dụ đơn giản:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Progress Example</title>
</head>
<body>
    <label for="file">Đang tải lên tệp:</label>
    <progress id="file" value="32" max="100"></progress>
</body>
</html>

Trong ví dụ trên, thuộc tính value biểu diễn tiến độ hiện tại của công việc, và max đại diện cho giá trị tối đa mà công việc có thể đạt được. Ví dụ này minh hoạ rằng tiến độ hiện tại của công việc là 32 trên tổng số 100.

Các thuộc tính và Sử dụng

value

  • Mô tả: Định nghĩa giá trị hiện tại của tiến trình.
  • Sử dụng: <progress value="50"></progress>

max

  • Mô tả: Định nghĩa giá trị tối đa của tiến trình.
  • Sử dụng: <progress max="100"></progress>

Nếu không chỉ định thuộc tính max, giá trị mặc định sẽ là 1. Điều này có nghĩa rằng nếu value là 0.5 và không có max, tiến trình sẽ được hiểu là 50%.

Ví dụ sử dụng nâng cao

Bạn có thể tích hợp thẻ <progress> với JavaScript để thay đổi giá trị động. Điều này rất hữu ích trong các ứng dụng yêu cầu phản hồi trực tiếp từ phía người dùng. Dưới đây là một ví dụ:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Progress Example</title>
</head>
<body>
    <label for="file">Đang tải lên tệp:</label>
    <progress id="file" value="0" max="100"></progress>
    <button onclick="increaseProgress()">Tăng Tiến Trình</button>

    <script>
        function increaseProgress() {
            var progressBar = document.getElementById('file');
            if (progressBar.value < progressBar.max) {
                progressBar.value += 10;
            }
        }
    </script>
</body>
</html>

Trong đoạn mã này, khi người dùng nhấn vào nút “Tăng Tiến Trình”, giá trị của thẻ <progress> sẽ tăng lên 10 cho đến khi đạt tới giá trị tối đa là 100.

Stylistic Customization

CSS có thể được sử dụng để tùy chỉnh giao diện của thẻ <progress>:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Styled Progress Example</title>
    <style>
        progress {
            width: 100%;
            height: 20px;
        }

        progress::-webkit-progress-bar {
            background-color: #f3f3f3;
        }

        progress::-webkit-progress-value {
            background-color: #4caf50;
        }

        progress::-moz-progress-bar {
            background-color: #4caf50;
        }
    </style>
</head>
<body>
    <label for="file">Đang tải lên tệp:</label>
    <progress id="file" value="50" max="100"></progress>
</body>
</html>

Trong ví dụ này, tiến trình thanh tiến sẽ có chiều rộng đầy đủ, chiều cao là 20px, và màu nền cũng như màu tiến trình đã được thiết lập riêng biệt để trông bắt mắt hơn.

Kết luận

Thẻ <progress> là một công cụ mạnh mẽ và dễ sử dụng trong HTML để biểu diễn tiến trình của một nhiệm vụ. Bằng cách sử dụng các thuộc tính đơn giản như value và max, cũng như kết hợp với JavaScript và CSS, bạn có thể tạo ra những thanh tiến trình trực quan và linh hoạt, giúp nâng cao trải nghiệm người dùng trên trang web của mình.

Comments

Bài viết liên quan