这是一组效果非常酷的纯CSS3炫酷预加载Loading指示器动画特效。这组loading指示器共6种效果，都是使用:before和:after伪元素，以及CSS帧动画来完成各种不同的预加载指示器动画。
使用方法
音频波形Loading动画
HTML结构
使用5个空的<span>元素，每一个代表一条波形柱子。
<div id="preloader_1"> <span></span> <span></span> <span></span> <span></span> <span></span> </div>
CSS样式
音频波形Loading动画效果通过使每一条音频波形柱子的高度从5像素变化到30像素来完成。每一个span元素都被沿Y轴向下移动15像素，使动画动中心开始。
#preloader_1{
position:relative;
}
#preloader_1 span{
display:block;
bottom:0px;
width: 9px;
height: 5px;
background:#9b59b6;
position:absolute;
animation: preloader_1 1.5s infinite ease-in-out;
}
#preloader_1 span:nth-child(2){
left:11px;
animation-delay: .2s;
}
#preloader_1 span:nth-child(3){
left:22px;
animation-delay: .4s;
}
#preloader_1 span:nth-child(4){
left:33px;
animation-delay: .6s;
}
#preloader_1 span:nth-child(5){
left:44px;
animation-delay: .8s;
}
@keyframes preloader_1 {
0% {height:5px;transform:translateY(0px);background:#9b59b6;}
25% {height:30px;transform:translateY(15px);background:#3498db;}
50% {height:5px;transform:translateY(0px);background:#9b59b6;}
100% {height:5px;transform:translateY(0px);background:#9b59b6;}
}
通过分别为每一个span元素设置0.2秒的animation-delay动画延迟时间，使它们依次产生高度变化的动画效果。
圆形变矩形Loading动画
HTML结构
圆形变矩形Loading动画使用4个空的<span>元素，每一个代表一个圆形/矩形。
<div id="preloader_2"> <span></span> <span></span> <span></span> <span></span> </div>
CSS样式
该loading指示器动画通过修改border-radius属性来实现。
#preloader_2{
position: relative;
left: 50%;
width: 40px;
height: 40px;
}
#preloader_2 span{
display:block;
bottom:0px;
width: 20px;
height: 20px;
background:#9b59b6;
position:absolute;
}
#preloader_2 span:nth-child(1){
animation: preloader_2_1 1.5s infinite ease-in-out;
}
#preloader_2 span:nth-child(2){
left:20px;
animation: preloader_2_2 1.5s infinite ease-in-out;
}
#preloader_2 span:nth-child(3){
top:0px;
animation: preloader_2_3 1.5s infinite ease-in-out;
}
#preloader_2 span:nth-child(4){
top:0px;
left:20px;
animation: preloader_2_4 1.5s infinite ease-in-out;
}
@-keyframes preloader_2_1 {
0% {-transform: translateX(0px) translateY(0px) rotate(0deg); border-radius:0px;}
50% {-transform: translateX(-20px) translateY(-10px) rotate(-180deg); border-radius:20px;background:#3498db;}
80% {-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
100% {-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
}
@-keyframes preloader_2_2 {
0% {-transform: translateX(0px) translateY(0px) rotate(0deg);border-radius:0px;}
50% {-transform: translateX(20px) translateY(-10px) rotate(180deg);border-radius:20px;background:#f1c40f;}
80% {-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
100% {-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
}
@-keyframes preloader_2_3 {
0% {-transform: translateX(0px) translateY(0px) rotate(0deg);border-radius:0px;}
50% {-transform: translateX(-20px) translateY(10px) rotate(-180deg); border-radius:20px;background:#2ecc71;}
80% {-transform: translateX(0px) translateY(0px) rotate(-360deg);border-radius:0px;}
100% {-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
}
@-keyframes preloader_2_4 {
0% {-transform: translateX(0px) translateY(0px) rotate(0deg); border-radius:0px;}
50% {-transform: translateX(20px) translateY(10px) rotate(180deg); border-radius:20px;background:#e74c3c;}
80% {-transform: translateX(0px) translateY(0px) rotate(360deg); border-radius:0px;}
100% {-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
}
交叉图形变换Loading动画
HTML结构
该loading动画使用div元素的:before和:after为元素来制作。圆形变方形的动画通用是通过修改border-radius属性来实现。
<div id="preloader_3"></div>
CSS样式
#preloader_3{
position:relative;
}
#preloader_3:before{
width:20px;
height:20px;
border-radius:20px;
background:blue;
content:'';
position:absolute;
background:#9b59b6;
animation: preloader_3_before 1.5s infinite ease-in-out;
}
#preloader_3:after{
width:20px;
height:20px;
border-radius:20px;
background:blue;
content:'';
position:absolute;
background:#2ecc71;
left:22px;
animation: preloader_3_after 1.5s infinite ease-in-out;
}
@keyframes preloader_3_before {
0% {transform: translateX(0px) rotate(0deg)}
50% {transform: translateX(50px) scale(1.2) rotate(260deg); background:#2ecc71;border-radius:0px;}
100% {transform: translateX(0px) rotate(0deg)}
}
@keyframes preloader_3_after {
0% {transform: translateX(0px)}
50% {transform: translateX(-50px) scale(1.2) rotate(-260deg);background:#9b59b6;border-radius:0px;}
100% {transform: translateX(0px)}
}
蛇形Loading动画
HTML结构
该loading动画使用div元素的:before和:after为元素来制作。圆形变方形的动画通用是通过修改border-radius属性来实现。
<div id="preloader_4"> <span></span> <span></span> <span></span> <span></span> <span></span> </div>
CSS样式
该动画通过修改每一个span元素的Y轴位置，使它们下移10个像素，并使它们的颜色从蓝色变为黄色。阴影效果则是修改box-shadow的尺寸来完成。
#preloader_4{
position:relative;
}
#preloader_4 span{
position:absolute;
width:20px;
height:20px;
background:#3498db;
opacity:0.5;
border-radius:20px;
-animation: preloader_4 1s infinite ease-in-out;
}
#preloader_4 span:nth-child(2){
left:20px;
animation-delay: .2s;
}
#preloader_4 span:nth-child(3){
left:40px;
animation-delay: .4s;
}
#preloader_4 span:nth-child(4){
left:60px;
animation-delay: .6s;
}
#preloader_4 span:nth-child(5){
left:80px;
animation-delay: .8s;
}
@keyframes preloader_4 {
0% {
opacity: 0.3;
transform:translateY(0px);
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
50% {
opacity: 1;
transform: translateY(-10px);
background:#f1c40f;
box-shadow: 0px 20px 3px rgba(0, 0, 0, 0.05);}
100% {
opacity: 0.3;
transform:translateY(0px);
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
}
旋转轮盘Loading动画
HTML结构
该loading动画使用div元素来制作中心的圆形，并使用div元素的:after伪元素来制作两条旋转线效果。
<div id="preloader_5"></div>
CSS样式
两条旋转线使用:after伪元素来制作，通过给它设置50像素的顶部和底部border-radius俩创建这两条线。动画效果添加在div元素上，修改它的颜色以及通过transform: rotate()来使它进行旋转。
#preloader5{
position:relative;
width:30px;
height:30px;
background:#3498db;
border-radius:50px;
animation: preloader_5 1.5s infinite linear;
}
#preloader5:after{
position:absolute;
width:50px;
height:50px;
border-top:10px solid #9b59b6;
border-bottom:10px solid #9b59b6;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-radius:50px;
content:'';
top:-20px;
left:-20px;
animation: preloader_5_after 1.5s infinite linear;
}
@keyframes preloader_5 {
0% {transform: rotate(0deg);}
50% {transform: rotate(180deg);background:#2ecc71;}
100% {transform: rotate(360deg);}
}
@keyframes preloader_5_after {
0% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
50% {border-top:10px solid #3498db;border-bottom:10px solid #3498db;}
100% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
}
windows标志Loading动画
HTML结构
每一个span代表一个方块。
<div id="preloader_6"> <span></span> <span></span> <span></span> <span></span> </div>
CSS样式
所有的方块以网格进行布局。动画添加在主div元素上，使它产生旋转。另外i一个动画是使各个span元素不断的从100%缩放到50%。并通过animation-delay来控制各个span的动画延迟时间。
#preloader_6{
position:relative;
width: 42px;
height: 42px;
animation: preloader_6 5s infinite linear;
}
#preloader_6 span{
width:20px;
height:20px;
position:absolute;
background:red;
display:block;
animation: preloader_6_span 1s infinite linear;
}
#preloader_6 span:nth-child(1){
background:#2ecc71;
}
#preloader_6 span:nth-child(2){
left:22px;
background:#9b59b6;
animation-delay: .2s;
}
#preloader_6 span:nth-child(3){
top:22px;
background:#3498db;
animation-delay: .4s;
}
#preloader_6 span:nth-child(4){
top:22px;
left:22px;
background:#f1c40f;
animation-delay: .6s;
}
@keyframes preloader_6 {
from {-ms-transform: rotate(0deg);}
to {-ms-transform: rotate(360deg);}
}
@keyframes preloader_6_span {
0% { transform:scale(1); }
50% { transform:scale(0.5); }
100% { transform:scale(1); }
}
