html5 progress如何实现进度条效果,如何让进度条增长呢?

作者:前端大神~ | 时间:2019-05-08

HTML5中新增了progress标签,用来表示进度条。它的用途很广泛,可以用在文件上传的进度显示,文件下载的进度显示,设置加载的Loading进度显示。

定义及说明

<progress> 标签定义运行中的任务进度

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

max属性表示进度条的进度最大值,如果有此值,必须是大于0的有效浮点数。max的默认值是1.

value属性表示进度条完成的进度之,value值的范围为0~max之间。如果没有设置max属性,那么value属性值的范围要在0~1之间。

如果没有value值,那么完成进度是不确定的。这时候表示任务正在进行中,但不知道多长时间可以完成。这时候的progress在webkit浏览器中我们可以用作loading来使用,表示正在页面加载中,或者ajax请求后台数据中。

实例代码

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>我有答案(woyoudaan.cn)</title> 
</head>
<body>

下载进度:
<progress value="45" max="100">
</progress>

<p><strong>注意:</strong> IE 9 或者更早版本的 IE 浏览器不支持 progress 标签。</p>

</body>
</html>

显示效果:

html5 progress如何实现进度条效果,如何让进度条增长呢?

浏览器支持

IE 10、Firefox、Opera、Chrome 和 Safari 6 支持 <progress> 标签。

注释:IE 9 或者更早版本的 IE 浏览器不支持 <progress> 标签。


以上就是html5 progress标签的详细使用说明了,希望通过上面的说明,大家能够掌握 如何实现进度条效果,如何让进度条自动增长。