试一试
<label for="file">File progress:</label>
<progress id="file" max="100" value="70">70%</progress>
label {
padding-right: 10px;
font-size: 1rem;
}
属性
此元素包含全局属性。
max-
此属性描述了
progress元素指示的任务需要多少工作。max属性（如果存在）必须大于0，并且是一个有效的浮点数。默认值为1。 value-
此属性指定了已完成的任务量。它必须是介于
0和max之间（如果省略max，则为介于0和1之间）的一个有效浮点数。如果没有value属性，则进度条是未确定的；这表示活动正在进行中，但无法知道预计需要多长时间。
注意：与 <meter> 元素不同，<progress> 元素的最小值始终为 0，并且不允许使用 min 属性。
注意： :indeterminate 伪类可用于匹配未确定的进度条。要将进度条在赋予其值后更改为未确定状态，必须使用 element.removeAttribute('value') 移除 value 属性。
无障碍
标签
在大多数情况下，在使用 <progress> 时应提供可访问的标签。虽然您可以像使用 role="progressbar" 的任何元素一样使用标准的 ARIA 标签属性 aria-labelledby 或 aria-label，但在使用 <progress> 时，您也可以选择使用 <label> 元素。
注意：放在元素标签之间的文本不是可访问标签，仅作为不支持该元素的旧浏览器的后备方案推荐。
示例
html
<label>
Uploading Document: <progress value="70" max="100">70 %</progress>
</label>
<!-- OR -->
<br />
<label for="progress-bar">Uploading Document</label>
<progress id="progress-bar" value="70" max="100">70 %</progress>
结果
描述特定区域
如果 <progress> 元素描述的是页面某一部分的加载进度，请使用 aria-describedby 指向状态，并在正在更新的区域上设置 aria-busy="true"，在加载完成后移除 aria-busy 属性。
示例
html
<div aria-busy="true" aria-describedby="progress-bar">
<!-- content is for this region is loading -->
</div>
<!-- ... -->
<progress id="progress-bar" aria-label="Content loading…"></progress>
结果
示例
html
<progress value="70" max="100">70 %</progress>
结果
技术摘要
| 内容类别 | 流内容、文本内容、可标签内容、可感知内容。 |
|---|---|
| 允许内容 |
文本内容，但其后代中不能包含 <progress> 元素。 |
| 标签省略 | 无，起始标签和结束标签都必须存在。 |
| 允许父级 | 任何接受短语内容的元素。 |
| 隐式 ARIA 角色 | progressbar |
| 允许的 ARIA 角色 | 不允许 role |
| DOM 接口 | HTMLProgressElement |
规范
| 规范 |
|---|
| HTML # the-progress-element |
浏览器兼容性
加载中…