progress进度条滚动动画

最新推荐文章于 2024-05-10 16:29:39 发布

weixin_zsh

最新推荐文章于 2024-05-10 16:29:39 发布

阅读量2k

点赞数 6

CC 4.0 BY-SA版权

分类专栏： progress 进度条前端文章标签： progress

本文链接：https://blog.youkuaiyun.com/weixin_41863239/article/details/84621273

前端同时被 3 个专栏收录

39 篇文章

订阅专栏

progress

2 篇文章

订阅专栏

进度条

2 篇文章

订阅专栏

本文介绍了HTML5的progress标签用于创建进度条，适用于文件上传、下载进度显示和加载状态。讨论了max和value属性的用法，并展示了如何修改默认样式，以及浏览器兼容性问题。附带了一个简单的进度条DEMO。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html5的标签progress表示进度条，可以用在文件上传的进度显示，文件下载的进度显示，也可以作为一种loading的加载状态条使用。

<progress>有两个属性 max 和 value。

max 表示进度条的进度最大值，必须是大于0，默认值是1。

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

默认的进度条的样式为：

修改进度条默认样式的方法：

1	-webkit-appearance: none;【属性】	去除进度条的默认样式
2	progress::-webkit-progress-bar{}【伪类】	设置全部进度条的样式
3	progress::-webkit-progress-value{}【伪类】	设置已完成进度条的样式

兼容性：IE9以及更早版本不支持progress。

这是一个小demo

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>html5progress动画</title>
	<style type="text/css">
	progress{
		/*去除进度条的默认样式*/
    	-webkit-appearance: none;
	}
	/*设置全部进度条的颜色*/
	progress::-webkit-progress-bar{
	       background-color:#d7d7d7;
	}
	/*设置已完成进度的颜色*/
	progress::-webkit-progress-value{
	     background-color:#149383;
	}
	</style>
</head>
<body>
	<progress value="0" max="100" id="pg">
</body>
<script type="text/javascript">
	var pg = document.getElementById("pg");
	setInterval(function(){
		if(pg.value != 100){
			pg.value++;
			// console.log(pg.value+"%");
		}
	},100)
</script>
</html>

运行之后的效果：