浏览器：Chrome, IE
<!doctype html> <html> <head> <title>CSS transform: CSS only loading spinners</title> <style> /* general styling */ body { width:450px; margin:18px auto; } /* position the bars and balls correctly (rotate them and translate them outward)*/ .bar1 { transform:rotate(0deg) translate(0, -40px);opacity:0.12; } .bar2 { transform:rotate(45deg) translate(0, -40px);opacity:0.25; } .bar3 { transform:rotate(90deg) translate(0, -40px);opacity:0.37; } .bar4 { transform:rotate(135deg) translate(0, -40px);opacity:0.50; } .bar5 { transform:rotate(180deg) translate(0, -40px);opacity:0.62; } .bar6 { transform:rotate(225deg) translate(0, -40px);opacity:0.75; } .bar7 { transform:rotate(270deg) translate(0, -40px);opacity:0.87; } .bar8 { transform:rotate(315deg) translate(0, -40px);opacity:1; } /* set up the three bar spinners */ #div1, #div2,#div3 { position:relative; width:100px; height:100px; margin:25px; float:left; transform:scale(0.5); transform:scale(0.5); /* not used right now: */ animation-name: rotateThis; animation-duration:2s; animation-iteration-count:infinite; animation-timing-function:linear; } #div1 div, #div2 div, #div3 div { width:10px; height:30px; background:#000; position:absolute; top:35px; left:45px; } /* shadows for the first spinner */ #div1 div { box-shadow:black 0 0 4px } /* rounded outer corners for the second */ #div2 div { border-top-left-radius:10px; border-top-right-radius:10px; } /* full rounded corners and partially hidden for the third */ #div3 div { border-radius:20px; border-radius:20px; } #div3 .bar1, #div3 .bar2, #div3 .bar3 {opacity:0;} /* set up the three ball spinners */ #div4, #div5, #div6 { position:relative; width:100px; height:100px; margin:25px; border-radius:100px; float:left; transform:scale(0.5); animation-name: rotateThis; animation-duration:2s; animation-iteration-count:infinite; animation-timing-function:linear; } #div4 div, #div5 div, #div6 div { width:20px; height:20px; background:#000; border-radius:40px; position:absolute; left:40px; top:40px; } /* add a shadow to the first */ #div4 div { box-shadow:black 0 0 4px; } /* increase the balls in size */ #div5 .bar1 { transform:rotate(0deg) translate(0, -40px) scale(0.1);opacity:0.12;} #div5 .bar2 { transform:rotate(45deg) translate(0, -40px) scale(0.2);opacity:0.25;} #div5 .bar3 { transform:rotate(90deg) translate(0, -40px) scale(0.4);opacity:0.37;} #div5 .bar4 { transform:rotate(135deg) translate(0, -40px) scale(0.6);opacity:0.50;} #div5 .bar5 { transform:rotate(180deg) translate(0, -40px) scale(0.8);opacity:0.62;} #div5 .bar6 { transform:rotate(225deg) translate(0, -40px) scale(1);opacity:0.75;} #div5 .bar7 { transform:rotate(270deg) translate(0, -40px) scale(1.2);opacity:0.87;} #div5 .bar8 { transform:rotate(315deg) translate(0, -40px) scale(1.4);opacity:1;} /* hide the last halve */ #div6 .bar1 , #div6 .bar2, #div6 .bar3 {opacity:0;} /* uncomment this to use css animation in webkit browsers */ /* @-webkit-keyframes rotateThis { from {-webkit-transform:scale(0.5) rotate(0deg);} to {-webkit-transform:scale(0.5) rotate(360deg);} } */ </style> <script> //simple script to rotate all spinners 45 degrees on each tick //this works differently from the css transforms, which is smooth var count = 0; function rotate() { var elem = document.getElementById('div1'); var elem2 = document.getElementById('div2'); var elem3 = document.getElementById('div3'); var elem4 = document.getElementById('div4'); var elem5 = document.getElementById('div5'); var elem6 = document.getElementById('div6'); elem.style.transform = 'scale(0.5) rotate('+count+'deg)'; elem2.style.transform = 'scale(0.5) rotate('+count+'deg)'; elem3.style.transform = 'scale(0.5) rotate('+count+'deg)'; elem4.style.transform = 'scale(0.5) rotate('+count+'deg)'; elem5.style.transform = 'scale(0.5) rotate('+count+'deg)'; elem6.style.transform = 'scale(0.5) rotate('+count+'deg)'; if (count==360) { count = 0 } count+=45; window.setTimeout(rotate, 100); } window.setTimeout(rotate, 100); </script> </head> <body> <h2>Bars:</h2> <div id="div1"> <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> <div id="div2"> <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> <div id="div3"> <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> <h2 style="clear:both">Balls:</h2> <div id="div4"> <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> <div id="div5"> <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> <div id="div6"> <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> </body> </html>
参考：http://kilianvalkhof.com/uploads/spinners/