<!DOCTYPE html>
<html>

<head>

<meta charset="UTF-8">

<title>10款CSS3进度条/Loading动画DEMO演示</title>
<style>
body {
background-color : grey;
}

div {
margin : 5px;
}

#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>
</head>

<body>

<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>

</body>

</html>

css3 进度条的更多相关文章

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

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

  2. 9款极具创意的HTML5/CSS3进度条动画（免积分下载）

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

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

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

  4. JavaScript 以及 css3进度条

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

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

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

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

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

  7. CSS3进度条动画

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

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

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

  9. CSS3进度条 和 HTML5 Canvas画圆环

    看到一些高大上的进度条插件,然后想自己用CSS写.经过搜索资料之后,终于成功了.为了以后方便拿来用,或者复习.将代码贴出. HTML代码: 只需要两个div,外面的为一个有border的div id为 ...

随机推荐

  1. AutoFac使用~IOC容器（DIP,IOC,DI）

    #cnblogs_post_body h1 { background-color: #A5A5A5; color: white; padding: 5px } Autofac一款IOC容器,据说比Sp ...

  2. 如何解决虚拟机克隆导致"Bringing up interface eth0: Error: No suitable device found: no device found for connection 'System eth0'."

    在VMware的虚拟机中克隆CentOS,在重启网卡的时候报错: Bringing up interface eth0:  Error: No suitable device found: no de ...

  3. [转]Windows多进程编程

    转自:http://blog.csdn.net/bxhj3014/article/details/2082255 一.进程的概念       进程是是一个正在运行的程序的实例(飘---),是系统分配资 ...

  4. HackerRank "Kitty and Katty"

    It's more of a brain-teaser than a Game Theory problem.. #!/bin/python3 T = int(input().strip()) for ...

  5. 读CopyOnWriteArrayList有感

    除了加锁外,其实还有一种方式可以防止并发修改异常,这就是将读写分离技术(不是数据库上的). 先回顾一下一个常识: 1.JAVA中“=”操作只是将引用和某个对象关联,假如同时有一个线程将引用指向另外一个 ...

  6. (C#) 反转字符串，反转一个句子中单词。

    这个是非常基本的一道面试题,但是要考虑周全. 首先反转一个字符串: 基本思路是变成Char数组,然后调用C#里面的方法,或者设定两个index,从头,尾向中间遍历,并交换. 方法一: Array.Re ...

  7. 解决ftp连接出现 无法从控制 Socket 读取。Socket 错误 = #10054。

    ftp连接会显示以下错误信息 无法从控制 Socket 读取.Socket 错误 = #10054 或者是这样的信息 Opening data channel for directory list.T ...

  8. NDK SO 库开发与使用中的 ABI 构架选择

    Bugtags V1.2.7 引入了 NDK SO 库,在集成的时候,遇到不同的 SO 库打包到 APK 时,安装在某些机器上,出现 java.lang.UnsatisfiedLinkError 加载 ...

  9. 通过dblink的方式查看表的结构

    有dba权限: SELECT * FROM DBA_TAB_COLUMNS@DBLINK_TEST WHERE TABLE_NAME = '表名'; 没有dba权限:SELECT * FROM USE ...

  10. (LinkedList)2. Add Two Numbers

    You are given two linked lists representing two non-negative numbers. The digits are stored in rever ...