css3实现不同进度条

进度条类型1（渐变进度条）

效果1：图片实现进度条

思路，进度条是一张图片，用定位来控制不同时间图片相对进度条box的left值来控制位置，用animate实现动画效果

html

<div class="barBox">
     <img class="barImg" src="../../../../Public/src/activity/Lianliankan/images/progressBar.png" style="left: -561.565px;">
</div>

css

.gameBg .barBox {
    position: absolute;
    top: 45px;
    left: 55px;
    display: inline-block;
    width: 514px;
    height: 26px;
    border-radius: 13px;
    overflow: hidden;
}

.gameBg .barBox .barImg {
    position: absolute;
    top: 0;
    left: -607px;
    display: inline-block;
    width: 609px;
    height: 26px;
}

 js

var timeCtrl = setTimeout(startGame,);
//游戏3s后开始
startGame = function(){
    $(".barImg").animate({'left':-},,linear,function(){
        $(".barImg").css('left',);
    });
};

效果2：纯css3实现进度条

效果图

使用纯css3实现以上类似渐变进度条的时候，我们可以使用可以到此网站：http://www.colorzilla.com/gradient-editor/ ，这样完成渐变效果就变得非常简单，跟用PS的操作是一样一样的。将背景设置为渐变后，还需要设置background-size（设置的大小为每一个节点），这样才能实现重复效果：

html

<div id="progress">
    <span></span>
</div>

css

#progress{
                width: %;
                height: 30px;
                border:1px solid #ccc;
                border-radius: 15px;
                margin: 50px   100px;
                overflow: hidden;
                box-shadow:   5px 0px #ddd inset;
            }
            #progress span {
                display: inline-block;
                width: %;
                height: %;
                background: #2989d8; /* Old browsers */
                background: -moz-linear-gradient(45deg, #2989d8 %, #7db9e8 %, #7db9e8 %, #2989d8 %); /* FF3.6+ */
                background: -webkit-gradient(linear, left bottom, right top, color-stop(%,#2989d8), color-stop(%,#7db9e8), color-stop(%,#7db9e8), color-stop(%,#2989d8)); /* Chrome,Safari4+ */
                background: -webkit-linear-gradient(45deg, #2989d8 %,#7db9e8 %,#7db9e8 %,#2989d8 %); /* Chrome10+,Safari5.1+ */
                background: -o-linear-gradient(45deg, #2989d8 %,#7db9e8 %,#7db9e8 %,#2989d8 %); /* Opera 11.10+ */
                background: -ms-linear-gradient(45deg, #2989d8 %,#7db9e8 %,#7db9e8 %,#2989d8 %); /* IE10+ */
                background: linear-gradient(45deg, #2989d8 %,#7db9e8 %,#7db9e8 %,#2989d8 %); /* W3C */
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2989d8', endColorstr='#2989d8',GradientType= ); /* IE6-9 fallback on horizontal gradient */
                background-size: 60px 30px;
                text-align: center;
                color:#fff;
                -webkit-animation:load 3s ease-in;
            }
            @-webkit-keyframes load{
                %{
                    width: %;
                }
                %{
                    width:%;
                }
            }
            #progress span{
                width: %;
            }
            @-webkit-keyframes load{
                  %{
                    width: %;
                  }
                %{
                    width:%;
                  }
            }

进度条类型2（渐变圆弧进度条）

效果图

html

<!--圆型进度条-->
        <div class="circleProgress_wrapper">
            <div class="wrapper right">
                <div class="circleProgress rightcircle"></div>
            </div>
            <div class="wrapper left">
                <div class="circleProgress leftcircle"></div>
            </div>
            <div class="time" style="position: absolute;top:50%;left:50%;margin:auto;"></div>
        </div>

        <div style="color:red;" class="btn">点击我啦</div>

css 

        .circleProgress_wrapper{
            width: 200px;
            height: 200px;
            margin: 50px auto;
            position: relative;
            border:1px solid #ddd;
        }

        .wrapper{
            width: 100px;
            height: 200px;
            position: absolute;
            top:;
            overflow: hidden;
        }
        .right{
            right:;
        }
        .left{
            left:;
        }
        .circleProgress{
            width: 160px;
            height: 160px;
            border:20px solid rgb(, , );
            border-radius: %;
            position: absolute;
            top:;
            -webkit-transform: rotate(45deg);
        }
        .rightcircle{
            border-top:20px solid green;
            border-right:20px solid green;
            right:;
/*            -webkit-animation: circleProgressLoad_right 60s linear infinite;*/
        }
        .rightcircle2{
            -webkit-animation: circleProgressLoad_right 60s linear infinite;
        }
        .leftcircle{
            border-bottom:20px solid green;
            border-left:20px solid green;
            left:;
/*            -webkit-animation: circleProgressLoad_left 60s linear infinite;*/
        }
        .leftcircle2{
            -webkit-animation: circleProgressLoad_left 60s linear infinite;
        }
        @-webkit-keyframes circleProgressLoad_right{
            %{
                border-top:20px solid #ED1A1A;
                border-right:20px solid #ED1A1A;
                -webkit-transform: rotate(45deg);
            }
            %{
                border-top:20px solid rgb(, , );
                border-right:20px solid rgb(, , );
                border-left:20px solid rgb(, , );
                border-bottom:20px solid rgb(, , );
                -webkit-transform: rotate(225deg);
            }
            %{
                border-left:20px solid green;
                border-bottom:20px solid green;
                -webkit-transform: rotate(225deg);
            }
        }
        @-webkit-keyframes circleProgressLoad_left{
            %{
                border-bottom:20px solid #ED1A1A;
                border-left:20px solid #ED1A1A;
                -webkit-transform: rotate(45deg);
            }
            %{
                border-bottom:20px solid rgb(, , );
                border-left:20px solid rgb(, , );
                border-top:20px solid rgb(, , );
                border-right:20px solid rgb(, , );
                -webkit-transform: rotate(45deg);
            }
            %{
                border-top:20px solid green;
                border-right:20px solid green;
                border-bottom:20px solid green;
                border-left:20px solid green;
                -webkit-transform: rotate(225deg);
            }
        }

js

var time=;
        var time1;
        $(".btn").on("click",function(){
            time1 =setInterval(function(){
                setTimeout(function(){
                    time--
                },);

                $(".rightcircle").addClass("rightcircle2");
                $(".leftcircle").addClass("leftcircle2");
                if(time<){
                    clearInterval(time1)
                }else {
                    $(".time").html(time);
                }
            },)
        })

详细见

https://blog.csdn.net/u011326979/article/details/54016253