css3 loading效果

<style type="text/css">
    .spinner {<br />        margin: 100px auto;<br />       width: 20px;<br />      height: 20px;<br />     position: relative;<br />   }<br /> .container1 > div, .container2 > div, .container3 > div {<br />     width: 6px;<br />       height: 6px;<br />      background-color: #ff66cc;<br />        border-radius: 100%;<br />      position: absolute;<br />       -webkit-animation: bouncedelay 1.2s infinite ease-in-out;<br />     animation: bouncedelay 1.2s infinite ease-in-out;<br />     -webkit-animation-fill-mode: both;<br />        animation-fill-mode: both;<br />    }<br /> .spinner .spinner-container {<br />     position: absolute;<br />       width: 100%;<br />      height: 100%;<br /> }<br /> .container2 {<br />     -webkit-transform: rotateZ(45deg);<br />        transform: rotateZ(45deg);<br />    }<br /> .container3 {<br />     -webkit-transform: rotateZ(90deg);<br />        transform: rotateZ(90deg);<br />    }<br /> .circle1 {<br />        top: 0; left: 0;<br />  }<br /> .circle2 {<br />        top: 0; right: 0;<br /> }<br /> .circle3 {<br />        right: 0; bottom: 0;<br />  }<br /> .circle4 {<br />        left: 0; bottom: 0;<br />   }<br /> .container2 .circle1 {<br />        -webkit-animation-delay: -1.1s;<br />       animation-delay: -1.1s;<br />   }<br /> .container3 .circle1 {<br />        -webkit-animation-delay: -1.0s;<br />       animation-delay: -1.0s;<br />   }<br /> .container1 .circle2 {<br />        -webkit-animation-delay: -0.9s;<br />       animation-delay: -0.9s;<br />   }<br /> .container2 .circle2 {<br />        -webkit-animation-delay: -0.8s;<br />       animation-delay: -0.8s;<br />   }<br /> .container3 .circle2 {<br />        -webkit-animation-delay: -0.7s;<br />       animation-delay: -0.7s;<br />   }<br /> .container1 .circle3 {<br />        -webkit-animation-delay: -0.6s;<br />       animation-delay: -0.6s;<br />   }<br /> .container2 .circle3 {<br />        -webkit-animation-delay: -0.5s;<br />       animation-delay: -0.5s;<br />   }<br /> .container3 .circle3 {<br />        -webkit-animation-delay: -0.4s;<br />       animation-delay: -0.4s;<br />   }<br /> .container1 .circle4 {<br />        -webkit-animation-delay: -0.3s;<br />       animation-delay: -0.3s;<br />   }<br /> .container2 .circle4 {<br />        -webkit-animation-delay: -0.2s;<br />       animation-delay: -0.2s;<br />   }<br /> .container3 .circle4 {<br />        -webkit-animation-delay: -0.1s;<br />       animation-delay: -0.1s;<br />   }<br /> @-webkit-keyframes bouncedelay {<br />      0%, 80%, 100% { -webkit-transform: scale(0.0) }<br />       40% { -webkit-transform: scale(1.0) }<br /> }<br /> @keyframes bouncedelay {<br />      0%, 80%, 100% {<br />           transform: scale(0.0);<br />            -webkit-transform: scale(0.0);<br />        }<br />     40% {<br />         transform: scale(1.0);<br />            -webkit-transform: scale(1.0);<br />        }<br /> }<br /></style>
<div class="spinner">
<div class="spinner-container container1">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container2">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container3">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
</div>