使用 JavaScript 中的定时器和 CSS3 中的圆角矩形，我们可以实现内容载入时的转圈动画。看下面的代码：
<!DOCTYPE html>
<html>
<head>
<title>内容载入时的转圈动画</title>
<style type="text/css">
#loaddiv span {
position: absolute; 4px; height: 4px;
-moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px;
}
.bullet1 { background:#00F; } .bullet2 { background:#22F; }
.bullet3 { background:#44F; } .bullet4 { background:#66F; }
.bullet5 { background:#88F; } .bullet6 { background:#AAF; }
.bullet7 { background:#CCF; } .bullet8 { background:#EEF; }
</style>
</head>
<body>
<div id="loaddiv">
<span class="bullet1"></span><span class="bullet2"></span>
<span class="bullet3"></span><span class="bullet4"></span>
<span class="bullet5"></span><span class="bullet6"></span>
<span class="bullet7"></span><span class="bullet8"></span>
</div>
<script type="text/javascript">
window.onload = function() {
var loader = document.getElementById("loaddiv");
var bullets = loader.getElementsByTagName("span");
initShow();
function initShow() {
var x, y;
for (var i = 0; i < 8; i++) {
x = 8 + 8 * Math.cos(i*Math.PI/4); y = 8 + 8 * Math.sin(i*Math.PI/4);
bullets[i].style.left = x + "px"; bullets[i].style.top = y + "px";
}
loadShow(0);
}
function loadShow(idx) {
var j;
loader.style.visibility = "hidden";
for (var i = 0; i < 8; i++) {
j = (idx <= i)? idx - i + 8 : idx - i;
bullets[i].className = "bullet" + j;
}
loader.style.visibility = "visible";
idx = (idx === 7) ? 0 : idx + 1;
setTimeout(loadShow, 400, idx);
}
};
</script>
</body>
</html>
这个代码运行的结果是8个颜色渐变且不停转圈的小圆点（查看结果）。当然，对于这种情形，也可以用 setInterval 代替 setTimeout。另外，在代码中用 CSS3 实现了一些圆圈，因此不能用在旧版本的浏览器中（详情看前一篇笔记）。
参考资料：
[1] Javascript Loading Screen
[2] JavaScript打造Loading动画效果