一段js+html+css实现的loading图标效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<style type="text/css">
#dot,#dot u,#dot b,#dot i{overflow:hidden;}
#dot {width:16px;height:16px;text-align:center;}
#dot b,#dot i{display:block;background:#666666;}
#dot u{margin:0px;padding:0px;width:4px;height:4px;float:left;}
#dot b{height:1px;width:2px;margin-left:1px;}
#dot i{height:2px;width:4px;}
#dot #dot1,#dot #dot7{margin-left:2px;}
#dot #dot1{padding-top:2px;}
#dot #dot3,#dot #dot6{padding-top:2px;}
#dot #dot4{padding-left:8px;}
#mn{border:1px solid #9dd;padding:20px;}
</style>
<script>
/*
project : 模拟FireFox载入动画
By : Missde
Date : 2006
Link : www.missde.cn
*/
var dotdiv=
      "<div id='dot'>"
   +"<u id='dot1'><b></b><i></i><b></b></u>"
   +"<u id='dot2'><b></b><i></i><b></b></u>"
   +"<u id='dot3'><b></b><i></i><b></b></u>"
   +"<u id='dot8'><b></b><i></i><b></b></u>"
   +"<u id='dot4'><b></b><i></i><b></b></u>"
   +"<u id='dot7'><b></b><i></i><b></b></u>"
   +"<u id='dot6'><b></b><i></i><b></b></u>"
   +"<u id='dot5'><b></b><i></i><b></b></u>"
+"</div>";
function gID(str){
   return document.getElementById(str);
}
function loadingdot(a){
    if(a<=1 || a>8)a=1;
    loadingdot_a2=a-0+1;
    for(var i=8;i>=1;i--){
        var d=loadingdot_a2-i;
        if(d<1)d+=8;
        gID("dot"+i).style.MozOpacity=(1.2-d/10);
        gID("dot"+i).style.filter="alpha(opacity=" +(120-d*10)+")";
        gID("dot"+i).style.opacity=(1.2-d/10);
    }
    setTimeout("loadingdot(loadingdot_a2)",100);
}
function loading(){
    gID("mn").innerHTML=dotdiv;
    loadingdot(1);
}
</script>
</head>
<body>
<center><div id="mn"></div></center>
<script>loading()</script>
</body>
</html>
这个纯属好玩了，个人感觉实用价值不高，不过思路还是不错的