js+css实现进度条

其实实现进度条的方法最简单的就是先定义好这个标签的背景颜色这样容易区分,还要设置好高端,一开始宽度为0,随之宽度的增宽进度条也会随之变长。

<div class="propess">div>
.propess{
	backgroundColor: skyblue;
	height: 10px;
	width: 0;
}

如果想体验更好一些,让进度条有一个外边框,则需要在这个标签外层在包围一层div,给外层的div,设置好边框颜色,这个div的宽度设置的要跟进度条最长的宽度一致。

<div class="out">
	<div class="inside">div>
div>
.out{
	border: 1px solid blue;
	width: 600px; // 这里的宽度要跟最终进度条的宽度一致宽
}
.inside{
	backgroundColor: skyblue;
	height: 10px;
	width: 0;
}

你可能感兴趣的:(CSS3,JS,js+css实现进度条,css3,js,html5)