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

（常用代码）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.net/download/china_guanq/10232042

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