CSS3制作ajax loader icon

demo

本文用到的两个CSS3属性：transform、animation

一、HTML

<div class="ajax-loading">
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3"></div>
    <div class="bar4"></div>
    <div class="bar5"></div>
    <div class="bar6"></div>
    <div class="bar7"></div>
    <div class="bar8"></div>
</div>

二、CSS

.ajax-loading {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 25px;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-animation: rotateThis 1s infinite step-start;
    animation: rotateThis 1s infinite step-start;
}
.ajax-loading div {
    position: absolute;
    top: 35px;
    left: 45px;
    width: 10px;
    height: 30px;
    background: #000;
}
.ajax-loading div.bar1 {
    -webkit-transform: rotate(0deg) translate(0, -40px);
    transform: rotate(0deg) translate(0, -40px);
    opacity: 0.12;
}
.ajax-loading div.bar2 {
    -webkit-transform: rotate(45deg) translate(0, -40px);
    transform: rotate(45deg) translate(0, -40px);
    opacity: 0.25;
}
.ajax-loading div.bar3 {
    -webkit-transform: rotate(90deg) translate(0, -40px);
    transform: rotate(90deg) translate(0, -40px);
    opacity: 0.37;
}
.ajax-loading div.bar4 {
    -webkit-transform: rotate(135deg) translate(0, -40px);
    transform: rotate(135deg) translate(0, -40px);
    opacity: 0.5;
}
.ajax-loading div.bar5 {
    -webkit-transform: rotate(180deg) translate(0, -40px);
    transform: rotate(180deg) translate(0, -40px);
    opacity: 0.62;
}
.ajax-loading div.bar6 {
    -webkit-transform: rotate(225deg) translate(0, -40px);
    transform: rotate(225deg) translate(0, -40px);
    opacity: 0.75;
}
.ajax-loading div.bar7 {
    -webkit-transform: rotate(270deg) translate(0, -40px);
    transform: rotate(270deg) translate(0, -40px);
    opacity: 0.87;
}
.ajax-loading div.bar8 {
    -webkit-transform: rotate(315deg) translate(0, -40px);
    transform: rotate(315deg) translate(0, -40px);
    opacity: 1;
}
@-webkit-keyframes rotateThis {
  0% {-webkit-transform:scale(0.5) rotate(0deg);}
  12.5% {-webkit-transform:scale(0.5) rotate(45deg);}
  25% {-webkit-transform:scale(0.5) rotate(90deg);}
  37.5% {-webkit-transform:scale(0.5) rotate(135deg);}
  50% {-webkit-transform:scale(0.5) rotate(180deg);}
  62.5% {-webkit-transform:scale(0.5) rotate(225deg);}
  75% {-webkit-transform:scale(0.5) rotate(270deg);}
  87.5% {-webkit-transform:scale(0.5) rotate(315deg);}
  100% {-webkit-transform:scale(0.5) rotate(360deg);}
}
@keyframes rotateThis {
  0% {transform:scale(0.5) rotate(0deg);}
  12.5% {transform:scale(0.5) rotate(45deg);}
  25% {transform:scale(0.5) rotate(90deg);}
  37.5% {transform:scale(0.5) rotate(135deg);}
  50% {transform:scale(0.5) rotate(180deg);}
  62.5% {transform:scale(0.5) rotate(225deg);}
  75% {transform:scale(0.5) rotate(270deg);}
  87.5% {transform:scale(0.5) rotate(315deg);}
  100% {transform:scale(0.5) rotate(360deg);}
}

三、思路

1. transform控制每个小方块在Y轴的偏移，rotate控制旋转的角度，scale缩放至原大小的一半；

2. opacity在每个小方块之间相差0.12左右，达到渐变效果；

3. 设置top与left偏移，控制圆心在中心处；

4. 为整个方块设置旋转动画rotateThis，定义8个时间点；

5. 设置动画的animation-timing-function为step-start，达到的效果是不让动画渐变；