有些有些情况下,我们在页面需要用到进度条
如果手写的化还需要判断宽度、百分比等问题
在html中,progress
标签是html5中新增的标签,是定义运行中的任务进度/进程,通常和JavaScript一起使用来实现进度条。
注释:<progress>
标签不适合用来表示度量衡(例如,磁盘空间使用情况或查询结果)。如需表示度量衡,请使用 <meter>
标签代替。
(这不一样的吗?而且progress
可以自定义最大值)
COPY
1 | 90%:<progress value="90" max="100">内容</progress> |
效果如下:
90%:
50%:
30%:
150%:
属性 | 值 | 描述 |
---|---|---|
max | number | 规定任务一共需要多少工作 |
value | number | 规定已经完成多少任务 |
关于meter
注释:<meter>
标签不应用于指示进度(在进度条中)。如果标记进度条,请使用 <progress>
标签
COPY
1 | <p>显示度量值:</p> |
显示度量值:
0.3%:0.6%:
属性 | 值 | 描述 |
---|---|---|
form | form_id | 规定 <meter> 元素所属的一个或多个表单 |
high | number | 规定被视作高的值的范围 |
low | number | 规定被视作低的值的范围 |
max | number | 规定范围的最大值 |
min | number | 规定范围的最小值 |
optimum | number | 规定度量的优化值 |
value | number | [必需]规定度量的当前值 |