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

css3实现不同进度条的更多相关文章

  1. css3圆形百分比进度条的实现原理

    原文地址:css3圆形百分比进度条的实现原理 今天早上起来在查看jquery插件机制的时候,一不小心点进了css3圆形百分比进度条的相关文章,于是一发不可收拾,开始折腾了... 关于圆形圈的实现,想必 ...

  2. CSS3时钟式进度条

    CSS3时钟式进度条,加载完成时生成一个圆,数字慢慢变成100,适时的显示加载进度.友情提醒,如果预览时网页左下角提示错误,刷新一下就可以看到效果了:实际使用中不会出现这样的问题. <!DOCT ...

  3. CSS3实现圆环进度条

    摘要:圆环进度条被应用于各个场景,比如我们可以用来表示加载进度等.通常我们可以用 css3 的动画去实现. 详解 css3 实现圆环进度条 简单的画一个圆环,我们都知道如何使用 css 画一个圆环.( ...

  4. CSS3实现圆形进度条

    介绍 闲来无事,去了CSS3Plus网站逛了逛,发现了一个很有意思的实现--css3实现进度条.粗略看了下代码,发现原理其实很简单,不难理解. 现在在此讲述下原理并实现一个1s更新的进度条. 技术细节 ...

  5. css3飞机起飞进度条

    效果:http://hovertree.com/texiao/css3/27/ 源码下载:http://hovertree.com/h/bjaf/pgwql1x2.htm 本效果使用Font Awes ...

  6. 【JavaScript】HTML5/CSS3实现五彩进度条应用

    今天要介绍的是一款基于HTML5和CSS3的进度条应用,这款进度条是静态的,仅提供进度条的五彩外观.当然你可以在CSS中动态设置进度值来让其变得动态,一个很好的实现方式是利用jQuery动态改变CSS ...

  7. 纯CSS3实现圆形进度条动画

    悄悄地,GIF 格式的进度条已经越来越少,CSS 进度条如雨后春笋般涌现.今天要介绍的这个 CSS3 进度条,效果和 Flyme OS 4 上的加载动画一样. 首先,来看下最终的效果: 它的 HTML ...

  8. CSS3创建圆圈进度条

    最近在工作中需要做一个圆圈倒计时,刚开始的想法是做个纯数字的倒计时即可,可是需求觉得这个不太好看,想加个倒计时进度条.于是就有了接下来的分析过程... 我们知道CSS3可以很方便的画圆,圆环,然后在加 ...

  9. HTML5/CSS3实现五彩进度条应用

    今天要介绍的是一款基于HTML5和CSS3的进度条应用,这款进度条是静态的,仅提供进度条的五彩外观.当然你可以在CSS中动态设置进度值来让其变得动态,一个很好的实现方式是利用jQuery动态改变CSS ...

随机推荐

  1. JavaSE_坚持读源码_String对象_Java1.7

    /** * Compares this string to the specified object. The result is {@code * true} if and only if the ...

  2. Java lombok插件介绍

    lombok是什么? lombok是一个插件,用途是给你类里面的字段,自动的加上属性,构造器,ToString方法,Equals方法等等 lombok怎么安装? 安装网上一搜一大把,这里有一个Idea ...

  3. Linux记录- Linux下限制rm -rf /

    操作说明: 为了防止在linux下执行操作的时候误操作rm -rf /,或者rm -rf 一些比较重要的目录,我们做以下操作来限制rm的删除 1.下载源码安装包 https://raw.githubu ...

  4. js替换全部,js检查输入的日期是否是一个正确的日期格式

    <script language="javascript"> var str = "我爱的人和爱我的人,我爱的人和爱我的人"; var newstr ...

  5. spring-data-redis时效设置

    本人转自http://hbxflihua.iteye.com/blog/2320584#bc2396403 spring目前在@Cacheable和@CacheEvict等注解上不支持缓存时效设置,只 ...

  6. golang 缓冲区的终端输入

    bufio包实现了有缓冲的I/O.它包装一个io.Reader或io.Writer接口对象,os.stdin就是实现了这个接口 package main import ( "bufio&qu ...

  7. Entity Framework 学习总结之十一:POCO

    POCO Entity Framework 4.0 为实体提供了简单传统 CLR 对象( Plain Old CLR Object / POCO )支持.实体对象可以独立于 EF 存在,由此 EF 更 ...

  8. 细说log4j之log4j 2.x

    官网:https://logging.apache.org/log4j/2.x/ 1. 主要组件: 从图中可以看出,log4j2中的主要组件为:Filter,Appender,Logger,他们的层次 ...

  9. Sqlserver远程过程调用失败

    这种情况一般是由于有高版本的SqlServer导致的,网上有删除Loaldb之类的建议,这样其实不太好,回头用高版本数据库的话还得装回来.其实可以通过计算机管理->服务和应用程序进行设置,用下面 ...

  10. Emmet 记录

    Refs 熟悉 css 有优势,emmet 的的缩写语法特别像 css 选择器. =>参考本博笔记 # id > 直接子元素 child . class + Sibling 同级相邻的一个 ...