（常用代码）CSS3 进度条效果的实现

不需要阴影3D 的效果注释样式

/*box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.2);*/

构建HTML 结构和样式

<!-- 构建 HTML -->
<!--进度容器-->
<div class="progress">
	<!--进度条-->
	<div class="loader-container"></div>
</div>

<!--Css3 实现。 animation 动画控制-->
<style>
	html,body{
		margin: 0;
		height: 100%;
		width: 100%;
		overflow: hidden;
	}
	.loader-container {
		height: 100%;
		width: 55%;
		background: -webkit-linear-gradient(left,#f8dc4b,#d95a3d);
		background: -moz-linear-gradient(left,#f8dc4b,#d95a3d);
		background: -o-linear-gradient(left,#f8dc4b,#d95a3d);
		background: -ms-linear-gradient(left,#f8dc4b,#d95a3d);
		background: linear-gradient(left,#f8dc4b,#d95a3d);
		border-radius:7px;
		box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.2);
		animation: loader 1s linear;
	}
	.progress{
		width: 70%;
		height: 7px;
		border-radius:7px;
		margin-left: 15%;
		margin-top: 30%;
		background: -webkit-linear-gradient(left,#e4e3e4,#e4e5e4);
		background: -moz-linear-gradient(left,#e4e3e4,#e4e5e4);
		background: -o-linear-gradient(left,#e4e3e4,#e4e5e4);
		background: -ms-linear-gradient(left,#e4e3e4,#e4e5e4);
		background: linear-gradient(left,#e4e3e4,#e4e5e4);
	}
	@keyframes loader {
		0% {
			width: 0%;
		}
		100% {
			width: 55%;
		}
	}
</style>

针对移动H5 页面进度条的需要，控制其具体的JS 控制逻辑。提前准备好的代码，只侯等待copy 的刹那间，希望能帮助到大家。

源码附件下载地址（希望能赚点积分）：
http://download.csdn/download/china_guanq/10232042

或者加入Q群：595377655 ，共同学习、解决问题~

更多推荐

（常用代码）CSS3 进度条效果的实现