进度条类型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