<div id="caseVerte">
<div id="case1"></div>
<div id="case2"></div>
<div id="case3"></div>
<div id="case4"></div>
<div id="case5"></div>
<div id="case6"></div>
<div id="load">
<p>loading ...</p>
</div>
</div>
<div id="caseBleu">
<div id="case1"></div>
<div id="case2"></div>
<div id="case3"></div>
<div id="case4"></div>
<div id="case5"></div>
<div id="case6"></div>
<div id="load">
<p>loading ...</p>
</div>
</div>
<div id="caseRouge">
<div id="load">
<p>loading ...</p>
</div>
<div id="top"></div>
<div id="left"></div>
<div id="right"></div>
</div>
<div id="caseMarron">
<div id="boule"></div>
<div id="load">
<p>loading ...</p>
</div>
</div>
<div id="caseViolette">
<div id="cercle">
<div id="cercleCache"></div>
</div>
<div id="load">
<p>loading</p>
</div>
<div id="point"></div>
</div>
<div id="caseBlanche">
<div id="rond">
<div id="test"></div>
</div>
<div id="load">
<p>loading</p>
</div>
</div>
<div id="casePourpre">
<div id="load">
<p>loading</p>
</div>
<div id="vague">
<div id="vague1"></div>
<div id="vague2"></div>
<div id="vague3"></div>
<div id="vague4"></div>
<div id="vague5"></div>
<div id="vague6"></div>
</div>
</div>
<div id="caseVerteClaire">
<div id="transform">
<div id="transform1"></div>
<div id="transform2"></div>
<div id="transform3"></div>
</div>
<div id="load">
<p>loading</p>
</div>
</div>
<div id="caseGrise">
<div id="progress">
<div id="charge"></div>
</div>
<div id="load">
<p>loading</p>
</div>
</div>
<div id="caseMarronFonce">
<div id="spinner"></div>
</div>
<style> #caseVerte {
background-color : #30bf82;
height : 140px;
width : 150px;
padding-top : 10px;
float :left;
} #caseBleu {
background-color : #40dbff;
height : 140px;
width : 150px;
padding-top : 10px;
float : left;
} #caseRouge {
background-color : #bf3037;
height : 140px;
width : 150px;
padding-top : 10px;
float : left;
position : relative;
} #caseMarron {
background-color : #ffa773;
height : 140px;
width : 150px;
padding-top : 10px;
float : left;
position : relative;
} #caseViolette {
background-color : #592780;
height : 140px;
width : 150px;
padding-top : 10px;
float : left;
position : relative;
} #caseBlanche {
background-color : #C2C2C2;
height : 140px;
width : 150px;
padding-top : 10px;
float : left;
position : relative;
} #casePourpre {
background-color : #422c83;
height : 140px;
width : 150px;
padding-top : 10px;
float : left;
position : relative;
} #caseVerteClaire {
background-color : #C9F76F;
height : 140px;
width : 150px;
padding-top : 10px;
float : left;
position : relative;
} #caseGrise {
background-color : #222222;
height : 140px;
width : 150px;
padding-top : 10px;
float : left;
position : relative;
} #caseMarronFonce {
background-color : #FFEC73;
height : 140px;
width : 150px;
padding-top : 10px;
float : left;
position : relative;
} #caseVerte #load {
color : #fbfbfb;
font-family : calibri;
text-align : center;
} #caseBleu #load {
color : #0086a6;
font-family : calibri;
text-align : center;
} #caseRouge #load {
color : #ff737a;
font-family : calibri;
text-align : center;
margin-top : 50px;
} #caseMarron #load {
color : #bf6530;
font-family : calibri;
text-align : center;
margin-top : 50px;
} #caseViolette #load {
color : #D8A6FF;
font-family : calibri;
text-align : center;
margin-top : 100px;
} #caseBlanche #load {
color : #fff;
font-family : calibri;
text-align : center;
position : absolute;
top : 42px;
left :42px;
} #casePourpre #load {
color : #886ed7;
font-family : calibri;
text-align : center;
position : absolute;
top : 42px;
left :42px;
} #caseVerteClaire #load {
color : #444444;
font-family : calibri;
text-align : center;
position : absolute;
top : 42px;
left :42px;
} #caseGrise #load {
color : #222;
font-family : calibri;
text-align : center;
position : relative;
top : 42px;
font-size : 11px;
} /****DEBUT CASE 1****/
#caseVerte #case1 {
height : 10px;
width : 100px;
background-color : #fbfbfb;
animation : case1 2.25s infinite;
-webkit-animation : case1 2.25s infinite;
} #caseBleu #case1 {
height : 10px;
width : 100px;
background-color : #0086a6;
animation : case1 2.25s infinite;
-webkit-animation : case1 2.25s infinite;
} @-webkit-keyframes case1 {
0% {width : 0%;}
50% {width : 90px;}
100% {width : 0%;}
} @keyframes case1 {
0% {width : 0%;}
50% {width : 90px;}
100% {width : 0%;}
}
/****FIN CASE 1****/ /****DEBUT CASE 2****/
#caseVerte #case2 {
height : 10px;
width : 10px;
background-color : #fbfbfb;
animation : case2 2s infinite;
-webkit-animation : case2 2s infinite;
} #caseBleu #case2 {
height : 10px;
width : 10px;
background-color : #0086a6;
animation : case2 2s infinite;
-webkit-animation : case2 2s infinite;
} @-webkit-keyframes case2 {
0% {width : 0%;}
50% {width : 100px;}
100% {width : 0%;}
} @keyframes case2 {
0% {width : 0%;}
50% {width : 100px;}
100% {width : 0%;}
}
/****FIN CASE 2****/ /****DEBUT CASE 3****/
#caseVerte #case3 {
height : 10px;
width : 10px;
background-color : #fbfbfb;
animation : case3 1.75s infinite;
-webkit-animation : case3 1.75s infinite;
} #caseBleu #case3 {
height : 10px;
width : 10px;
background-color : #0086a6;
animation : case3 1.75s infinite;
-webkit-animation : case3 1.75s infinite;
} @-webkit-keyframes case3 {
0% {width : 0%;}
50% {width : 95px;}
100% {width : 0%;}
} @keyframes case3 {
0% {width : 0%;}
50% {width : 95px;}
100% {width : 0%;}
}
/****FIN CASE 3****/ /****DEBUT CASE 4****/
#caseVerte #case4 {
height : 10px;
width : 10px;
background-color : #fbfbfb;
animation : case3 2.5s infinite;
-webkit-animation : case3 2.5s infinite;
} #caseBleu #case4 {
height : 10px;
width : 10px;
background-color : #0086a6;
animation : case3 2.5s infinite;
-webkit-animation : case3 2.5s infinite;
} @-webkit-keyframes case4 {
0% {width : 0%;}
50% {width : 80px;}
100% {width : 0%;}
} @keyframes case4 {
0% {width : 0%;}
50% {width : 80px;}
100% {width : 0%;}
}
/****FIN CASE 4****/ /****DEBUT CASE 5****/
#caseVerte #case5 {
height : 10px;
width : 10px;
background-color : #fbfbfb;
animation : case3 1.5s infinite;
-webkit-animation : case3 1.5s infinite;
} #caseBleu #case5 {
height : 10px;
width : 10px;
background-color : #0086a6;
animation : case3 1.5s infinite;
-webkit-animation : case3 1.5s infinite;
} @-webkit-keyframes case5 {
0% {width : 0%;}
50% {width : 105px;}
100% {width : 0%;}
} @keyframes case5 {
0% {width : 0%;}
50% {width : 105px;}
100% {width : 0%;}
}
/****FIN CASE 5****/ /****DEBUT CASE 6****/
#caseVerte #case6 {
height : 10px;
width : 10px;
background-color : #fbfbfb;
animation : case3 5s infinite;
-webkit-animation : case3 5s infinite;
} #caseBleu #case6 {
height : 10px;
width : 10px;
background-color : #0086a6;
animation : case3 5s infinite;
-webkit-animation : case3 5s infinite;
} @-webkit-keyframes case6 {
0% {width : 0%;}
50% {width : 75px;}
100% {width : 0%;}
} @keyframes case6 {
0% {width : 0%;}
50% {width : 75px;}
100% {width : 0%;}
}
/****FIN CASE 6****/ /****DEBUT TOP****/
#top {
height : 10px;
width : 10px;
border-radius : 50%;
background-color : #ff737a;
position : absolute;
top : 10px;
left : 65px;
animation : turnTop 2s infinite;
-webkit-animation : turnTop 2s infinite;
} @keyframes turnTop {
0% {top : 10px;}
50% {top : 40px;}
100% {top : 10px;}
} @-webkit-keyframes turnTop {
0% {top : 10px;}
50% {top : 40px;}
100% {top : 10px;}
}
/****FIN TOP****/ /****DEBUT LEFT****/
#left {
height : 10px;
width : 10px;
border-radius : 50%;
background-color : #ff737a;
position : absolute;
bottom : 10px;
left : 10px;
animation : turnLeft 2s infinite;
-webkit-animation : turnLeft 2s infinite;
} @keyframes turnLeft {
0% {bottom : 10px; left : 10px;}
50% {bottom : 50px; left : 40px;}
100% {bottom : 10px; left : 10px;}
} @-webkit-keyframes turnLeft {
0% {bottom : 10px; left : 10px;}
50% {bottom : 50px; left : 40px;}
100% {bottom : 10px; left : 10px;}
}
/****FIN LEFT****/ /****DEBUT RIGHT****/
#right {
height : 10px;
width : 10px;
border-radius : 50%;
background-color : #ff737a;
position : absolute;
bottom : 10px;
right : 10px;
animation : turnRight 2s infinite;
-webkit-animation : turnRight 2s infinite;
} @keyframes turnRight {
0% {bottom : 10px; right : 10px;}
50% {bottom : 50px; right : 40px;}
100% {bottom : 10px; right : 10px;}
} @-webkit-keyframes turnRight {
0% {bottom : 10px; right : 10px;}
50% {bottom : 50px; right : 40px;}
100% {bottom : 10px; right : 10px;}
}
/****FIN RIGHT****/ /****DEBUT BOULE****/
#boule {
height : 10px;
width : 10px;
position : absolute;
top : 80px;
left : 10px;
background-color : #bf6530;
border-radius : 50%;
animation : boule 2s infinite;
-webkit-animation : boule 2s infinite;
} @keyframes boule {
0% {left : 10px;opacity : 0;}
50% {height : 20px; width : 20px; opacity : 1;}
100% {left : 120px; opacity : 0; height : 10px; width : 10px;}
} @-webkit-keyframes boule {
0% {left : 10px;opacity : 0;}
50% {height : 20px; width : 20px; opacity : 1;}
100% {left : 120px; opacity : 0; height : 10px; width : 10px;}
}
/****FIN BOULE****/ /****DEBUT CERCLE****/
#cercle {
height : 50px;
width : 50px;
position : absolute;
top : 45px;
left : 45px;
border-radius : 50%;
background : linear-gradient(#D8A6FF,#FFECEE);
animation : turnCercle 2s infinite;
-webkit-animation : turnCercle 5s infinite;
animation-timing-function : ease-in-out;
-webkit-animation-timing-function : ease-in-out;
} @-webkit-keyframes turnCercle {
0% {-webkit-transform : rotate(0deg);}
100% {-webkit-transform : rotate(10080deg);}
} @keyframes turnCercle {
0% {transform : rotate(0deg);}
100% {transform : rotate(10080deg);}
} #cercleCache {
height : 40px;
width : 40px;
position : absolute;
border-radius : 50%;
background-color : #592780;
z-index : 5;
}
/****FIN CERCLE****/ /****DEBUT POINT****/
#point {
height : 2px;
width : 2px;
position : relative;
top : -22px;
left : 96px;
border-radius : 50%;
background-color : #D8A6FF;
animation : point 1.5s infinite;
-webkit-animation : point 1.5s infinite;
animation-timing-function : linear;
-webkit-animation-timing-function : linear;
} @-webkit-keyframes point {
0% {left : 96px; opacity : 0;}
5% {left : 96px; opacity : 1;}
15% {left : 96px; opacity : 0;}
30% {left : 99px; opacity : 0;}
45% {left : 99px; opacity : 1;}
60% {left : 99px; opacity : 0;}
75% {left : 102px; opacity : 0;}
90% {left : 102px; opacity : 1;}
100% {left : 102px; opacity : 0;}
} @keyframes point {
0% {left : 96px; opacity : 0;}
5% {left : 96px; opacity : 1;}
15% {left : 96px; opacity : 0;}
30% {left : 99px; opacity : 0;}
45% {left : 99px; opacity : 1;}
60% {left : 99px; opacity : 0;}
75% {left : 102px; opacity : 0;}
90% {left : 102px; opacity : 1;}
100% {left : 102px; opacity : 0;}
}
/****FIN POINT****/ /****DEBUT TEST****/
#test {
height : 10px;
width : 10px;
position : absolute;
background-color : #fff;
border-radius : 50%;
top : 0px;
left : 10px;
} #rond {
height : 100px;
width : 100px;
border : 1px solid #fff;
border-radius : 50%;
position :absolute;
top : 20px;
left : 15px;
animation : rond 2s infinite;
-webkit-animation : rond 2s infinite;
} @keyframes rond {
0% {transform : rotate(0deg);}
100% {transform : rotate(360deg);}
} @-webkit-keyframes rond {
0% {-webkit-transform : rotate(0deg);}
100% {-webkit-transform : rotate(360deg);}
}
/****FIN TEST****/ /****DEBUT VAGUE****/
#vague {
position : absolute;
top : 72px;
left : 20px;
} #vague1 {
height : 5px;
width : 5px;
background-color : #886ed7;
float : left;
animation : vague1 2.5s infinite;
-webkit-animation : vague1 2.5s infinite;
} @-webkit-keyframes vague1 {
0% {height : 5px;}
50% {height : 30px;}
100% {height : 5px;}
} @keyframes vague1 {
0% {height : 5px;}
50% {height : 30px;}
100% {height : 5px;}
} #vague2 {
height : 5px;
width : 5px;
background-color : #886ed7;
float : left;
animation : vague2 2.5s infinite;
-webkit-animation : vague2 2.5s infinite;
animation-delay : 0.5s;
-webkit-animation-delay : 0.5s;
} @-webkit-keyframes vague2 {
0% {height : 5px;}
50% {height : 30px;}
100% {height : 5px;}
} @keyframes vague2 {
0% {height : 5px;}
50% {height : 30px;}
100% {height : 5px;}
} #vague3 {
height : 5px;
width : 5px;
background-color : #886ed7;
float : left;
animation : vague3 2.5s infinite;
-webkit-animation : vague3 2.5s infinite;
animation-delay : 1s;
-webkit-animation-delay : 1s;
} @-webkit-keyframes vague3 {
0% {height : 5px;}
50% {height : 30px;}
100% {height : 5px;}
} @keyframes vague3 {
0% {height : 5px;}
50% {height : 30px;}
100% {height : 5px;}
} #vague4 {
height : 5px;
width : 5px;
background-color : #886ed7;
float : left;
animation : vague4 2.5s infinite;
-webkit-animation : vague4 2.5s infinite;
animation-delay : 1.5s;
-webkit-animation-delay : 1.5s;
} @-webkit-keyframes vague4 {
0% {height : 5px;}
50% {height : 30px;}
100% {height : 5px;}
} @keyframes vague4 {
0% {height : 5px;}
50% {height : 30px;}
100% {height : 5px;}
} #vague5 {
height : 5px;
width : 5px;
background-color : #886ed7;
float : left;
animation : vague5 2.5s infinite;
-webkit-animation : vague5 2.5s infinite;
animation-delay : 2s;
-webkit-animation-delay : 2s;
} @-webkit-keyframes vague5 {
0% {height : 5px;}
50% {height : 30px;}
100% {height : 5px;}
} @keyframes vague5 {
0% {height : 5px;}
50% {height : 30px;}
100% {height : 5px;}
} #vague6 {
height : 5px;
width : 5px;
background-color : #886ed7;
float : left;
animation : vague6 2.5s infinite;
-webkit-animation : vague6 2.5s infinite;
animation-delay : 2.5s;
-webkit-animation-delay : 2.5s;
} @-webkit-keyframes vague6 {
0% {height : 5px;}
50% {height : 30px;}
100% {height : 5px;}
} @keyframes vague6 {
0% {height : 5px;}
50% {height : 30px;}
100% {height : 5px;}
}
/****FIN VAGUE****/ /****DEBUT TRANSFORM****/
#tranform {
position : absolute;
top : 85px;
left : 30px;
} #transform1 {
height : 30px;
width : 30px;
border-radius : 50%;
background-color : #444444;
position : absolute;
top : 85px;
left : 15px;
opacity : 0;
animation : transform 4s infinite;
-webkit-animation : transform 4s infinite;
} #transform2 {
height : 30px;
width : 30px;
border-radius : 50%;
background-color : #444444;
position : absolute;
top : 85px;
left : 54px;
opacity : 0;
animation : transform 4s infinite;
-webkit-animation : transform 4s infinite;
animation-delay : 0.5s;
-webkit-animation-delay : 0.5s;
} #transform3 {
height : 30px;
width : 30px;
border-radius : 50%;
background-color : #444444;
position : absolute;
top : 85px;
left : 94px;
opacity : 0;
animation : transform 4s infinite;
-webkit-animation : transform 4s infinite;
animation-delay : 1s;
-webkit-animation-delay : 1s;
} @-webkit-keyframes transform {
0% {opacity : 0;}
25% {opacity : 1;}
50% {opacity : 0;}
75% {opacity : 1;}
100% {opacity : 0;}
} @keyframes transform {
0% {border-radius : 0px; opacity : 0;}
20% {border-radius : 0px; opacity : 1;}
40% {border-radius : 0px; opacity : 0;}
60% {border-radius : 50%; opacity : 0;}
80% {border-radius : 50%; opacity : 1;}
100% {border-radius : 50%; opacity : 0;}
}
/****FIN TRANSFORM****/ /****DEBUT PROGRESS****/
#progress {
height : 10px;
width : 120px;
position : absolute;
top : 60px;
left : 10px;
box-shadow : 0px 0px 10px #111111 inset;
} #charge {
height : 10px;
width : 120px;
position : absolute;
top : 0px;
left : 0px;
background-color : #C9F76F;
margin : 0px;
animation : charge 7s infinite;
-webkit-animation : charge 7s infinite;
box-shadow : 0px 0px 5px #222 inset;
} @-webkit-keyframes charge {
0% {width : 0px;}
100% {width : 100%;}
} @keyframes charge {
0% {width : 0px;}
100% {width : 100%;}
}
/****FIN PROGRESS****/ /****DEBUT SPINNER****/
#spinner {
height : 40px;
width : 40px;
/*background-color : #61615E;*/
border : 2px solid #61615e;
border-left-color : transparent;
border-right-color : transparent;
border-radius : 50%;
animation : spin 2s infinite;
-webkit-animation : spin 2s infinite;
} @-webkit-keyframes spin {
0% {-webkit-transform : rotate(0deg);}
50% {-webkit-transform : rotate(360deg);}
100% {-webkit-transform : rotate(0deg);}
} @keyframes spin {
0% {transform : rotate(0deg);}
50% {transform : rotate(360deg);}
100% {transform : rotate(0deg);}
}
/****FIN SPINNER****/
</style>
 
 
 
 
 
 

loading ...

 
 
 
 
 
 

loading ...

loading ...

 
 
 
 

loading ...

 

loading

 
 

loading

loading

 
 

loading

 

loading

 

10个造型奇特的css3进度条(有的html被编辑器转义了,上面的代码还是OK的)。。。转载的更多相关文章

  1. css3 进度条

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>1 ...

  2. JavaScript 以及 css3进度条

    JavaScript css3进度条 使用css3实现进度条 <!DOCTYPE html> <html lang="en"> <head> & ...

  3. JS框架_(JQuery.js)纯css3进度条动画

    百度云盘 传送门 密码:wirc 进度条动画效果: <!DOCTYPE html> <html lang="zh"> <head> <me ...

  4. 分享9款极具创意的HTML5/CSS3进度条动画

    1.HTML5/CSS3图片加载进度条 可切换多主题 今天要分享的这款HTML5/CSS3进度条模拟了真实的图片加载场景,插件会默认去从服务器下载几张比较大的图片,然后让该进度条展现当前读取图片的进度 ...

  5. 9款极具创意的HTML5/CSS3进度条动画(免积分下载)

    尊重原创,原文地址:http://www.cnblogs.com/html5tricks/p/3622918.html 免积分打包下载地址:http://download.csdn.net/detai ...

  6. 超赞的CSS3进度条 可以随进度显示不同颜色

    原文:超赞的CSS3进度条 可以随进度显示不同颜色 现在的WEB已经不是以前的WEB了,传输更大的数据量,有着更加复杂的计算,这就需要利用进度条来提高用户体验,必要时可以让用户耐心等待,不至于因操作卡 ...

  7. 9款极具创意的HTML5/CSS3进度条动画

    今天我们要分享9款极具创意的HTML5/CSS3进度条动画,这些进度条也许可以帮你增强用户交互和提高用户体验,喜欢的朋友就收藏了吧. 1.HTML5/CSS3图片加载进度条 可切换多主题 今天要分享的 ...

  8. CSS3进度条动画

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  9. 【常见】CSS3进度条Loading动画

    现在,GIF 格式的进度条已经越来越少,CSS 进度条如雨后春笋般涌现.CSS3的崛起,更使得动态效果得以轻松实现,未来,必定是CSS3的天下,所以今天我就来分享一下几个常见的CSS3进度条Loadi ...

随机推荐

  1. 软件测试_APP测试_主要测试内容

    最近要测试手机端APP,所以查找了一下有关APP测试需要注意的事项,做了一下总结.如有补充,欢迎评论! 手机APP测试与WEB测试其实相似,但是也有特别需要注意的一些不同点,此处只列出部分注意事项,相 ...

  2. 将Centos 的默认yum源改为阿里云的yum源后出现的问题

    阿里各版本yum源如下: Centos5:http://mirrors.aliyun.com/repo/Centos-5.repo Centos6:http://mirrors.aliyun.com/ ...

  3. Category Theory: 01 One Structured Family of Structures

    Category Theory: 01 One Structured Family of Structures 这次看来要放弃了.看了大概三分之一.似乎不能够让注意力集中了.先更新吧. 群的定义 \( ...

  4. 使用pyspark模仿sqoop从oracle导数据到hive的主要功能(自动建表,分区导入,增量,解决数据换行符问题)

    最近公司开始做大数据项目,让我使用sqoop(1.6.4版本)导数据进行数据分析计算,然而当我们将所有的工作流都放到azkaban上时整个流程跑完需要花费13分钟,而其中导数据(增量)就占了4分钟左右 ...

  5. 上云利器,K8S应用编排设计器之快到极致

    前言在前面的文章中,我们已经提到,华为云有一个上云利器:应用编排设计器.作为华为云应用编排服务与用户沟通的桥梁,设计器坚持用户体验至上的理念,以图形化方式,在鼠标点击之间,助力企业快速上云.优质的交互 ...

  6. PAT甲题题解-1014. Waiting in Line (30)-模拟,优先级队列

    题意:n个窗口,每个窗口可以排m人.有k为顾客需要办理业务,给出了每个客户的办理业务时间.银行在8点开始服务,如果窗口都排满了,客户就得在黄线外等候.如果有一个窗口用户服务结束,黄线外的客户就进来一个 ...

  7. PAT甲题题解-1015. Reversible Primes (20)-素数

    先判断n是否为素数然后把n转化成d进制下再反转,转化为十进制的num判断num是否为素数 注意n为0和1时,不是素数!!!注意反转后的num也有可能为1,不是素数!!! #include <io ...

  8. PAT甲题题解-1039. Course List for Student (25)-建立映射+vector

    博主欢迎转载,但请给出本文链接,我尊重你,你尊重我,谢谢~http://www.cnblogs.com/chenxiwenruo/p/6789157.html特别不喜欢那些随便转载别人的原创文章又不给 ...

  9. “数学口袋精灵”第二个Sprint计划(第三天)

    “数学口袋精灵”第二个Sprint计划----第三天进度 任务分配: 冯美欣:欢迎界面的背景音乐完善 吴舒婷:游戏界面的动作条,选择答案后的音效 林欢雯:代码算法设计 进度:   冯美欣:欢迎界面背景 ...

  10. sql server获取当前月的天数

    方法1 SELECT 32-DAY(getdate()+32-DAY(getdate())) 方法2 CREATE FUNCTION dbo.fn_getMonthDayAll ---自定义函数名称 ...