当前位置：首页 > article >正文

HTML5 进度条（Progress Bar）详解

article 2025/3/1 9:47:25

HTML5 进度条（Progress Bar）详解

进度条是用于显示任务完成进度的控件，常用于加载、上传或下载等操作。HTML5提供了原生的<progress>元素，使得创建进度条变得简单和直观。

1. 基本用法

<progress>元素的基本语法如下：

<progress value="50" max="100"></progress>

value 属性表示当前进度。
max 属性表示进度条的最大值（默认值为1）。

2. 属性说明

value: 当前进度的值，通常是一个数字，表示已完成的部分。
max: 进度条的最大值，表示任务的总量。
min: 可选属性，表示进度条的最小值，默认为0。

3. 示例代码

以下是一个简单的进度条示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>进度条示例</title>
</head>
<body>
    <h1>任务进度</h1>
    <progress id="progressBar" value="0" max="100"></progress>
    <span id="progressText">0%</span>

    <button onclick="startProgress()">开始任务</button>

    <script>
        function startProgress() {
            let progressBar = document.getElementById("progressBar");
            let progressText = document.getElementById("progressText");
            let value = 0;

            const interval = setInterval(() => {
                value += 10; // 每次增加10%
                progressBar.value = value;
                progressText.innerText = value + "%";

                if (value >= 100) {
                    clearInterval(interval);
                }
            }, 1000); // 每秒更新一次
        }
    </script>
</body>
</html>

4. 样式调整

可以使用CSS来调整进度条的样式：

progress {
    width: 100%;
    height: 20px;
    appearance: none; /* 去掉默认样式 */
}

progress::-webkit-progress-bar {
    background-color: #f3f3f3; /* 背景颜色 */
}

progress::-webkit-progress-value {
    background-color: #4caf50; /* 进度颜色 */
}