用CSS3 实现loading动画

CSS3中常用transform，transition，animation三个属性制作动画，而loading动画算是页面最常见的动画之一，下面就用之前提到的几个属性做两个简单的loading动画

1.转圈式的（circle）

css代码：

<pre name="code" class="css">.loading-circle{
width:50px;
height:50px;
border:5px solid;
border-color:#333 #333 transparent;
border-radius:50%;
animation:loading-circle 1s linear both infinite;
}

@keyframes loading-circle{
0%{transform:rotate(0);}
100%{transform:rotate(360deg);}
}

html:

<div class="loading-circle"></div>

2.步进式的：

CSS：

.loading-step{
width:95px;
height:40px;
font-size:0;
overflow:hidden;
white-space:nowrap;
margin-top:20px;
vertical-align:middle;

}
.loading-step i{
display:inline-block;
width:10px;
height:10px;
background-color:#999;
border-radius:50%;
margin-right:10px;
}
.loading-step .bar{
line-height:40px;
animation:loading-step 1.5s steps(5,end) both infinite;
}
.loading-step i:nth-child(6){
transform:scale(1.5);
background-color:#333;
}
@keyframes loading-step{
0%{transform:translate(-100px);};
80%,100%{transform:translate(0);}
}

html:

<div class="loading-step">
<div class="bar">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
</div>

一些常用的loading动画网站：

1.preloaders.net

2.http://www.ajaxload.info/

3.http://www.loadinfo.net/

4.http://cssload.net/

以上为个人学习记录