Con un poco de css:
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style>
*{margin:0; padding:0}
#e{ width:100px; height:100px; overflow:hidden; position:absolute; top:50%; left:50%; z-index:360; margin-left:-50px; margin-top:-50px; border:1px dashed #999}
#c{ width:100px; height:2px; overflow:hidden; position:absolute; top:50%; }
.r{ width:50px; height:2px; background:#F00}
</style>
<script>
function rotate(angle){
var rotation = Math.PI * angle / 180;
var costheta = Math.cos(rotation);
var sintheta = Math.sin(rotation);
if(!window.ActiveXObject){
this.style.position='absolute';
this.style.webkitTransform ='rotate('+angle+'deg)';
this.style.MozTransform='rotate('+angle+'deg)';
this.style.OTransform='rotate('+angle+'deg)';
this.style.transform='rotate('+angle+'deg)';
}else{
this.style.filter="progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand')";
this.filters.item(0).M11 = costheta;
this.filters.item(0).M12 = -sintheta;
this.filters.item(0).M21 = sintheta;
this.filters.item(0).M22 = costheta;
this.style.top=50-this.offsetHeight/2+'px';
this.style.left=50-this.offsetWidth/2+'px';
}
}
onload=function(){
var progress=0;
var i=setInterval(function(){
progress++;
var o= document.getElementById('c').cloneNode(1);
o.style.zIndex=360-progress;
document.getElementById('e').appendChild(o);
rotate.call(o,progress);
if(progress==360){
clearInterval(i);
alert('listo');
}
},100);
}
</script>
</head>
<body>
<div id="e"><div id="c"><div class="r"></div></div></div>
</body>
</html>
O así (lo mismo, pero en forma de anillo):
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style>
*{margin:0; padding:0}
#e{ width:100px; height:100px; overflow:hidden; position:absolute; top:50%; left:50%; z-index:360; margin-left:-50px; margin-top:-50px; border:1px dashed #999}
#c{ width:100px; height:2px; overflow:hidden; position:absolute; top:50%; }
.r{ width:33px; height:2px; background:#F00}
</style>
<script>
function rotate(angle){
var rotation = Math.PI * angle / 180;
var costheta = Math.cos(rotation);
var sintheta = Math.sin(rotation);
if(!window.ActiveXObject){
this.style.position='absolute';
this.style.webkitTransform ='rotate('+angle+'deg)';
this.style.MozTransform='rotate('+angle+'deg)';
this.style.OTransform='rotate('+angle+'deg)';
this.style.transform='rotate('+angle+'deg)';
}else{
this.style.filter="progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand')";
this.filters.item(0).M11 = costheta;
this.filters.item(0).M12 = -sintheta;
this.filters.item(0).M21 = sintheta;
this.filters.item(0).M22 = costheta;
this.style.top=50-this.offsetHeight/2+'px';
this.style.left=50-this.offsetWidth/2+'px';
}
}
onload=function(){
var progress=0;
var i=setInterval(function(){
progress++;
var o= document.getElementById('c').cloneNode(1);
o.style.zIndex=360-progress;
document.getElementById('e').appendChild(o);
rotate.call(o,progress);
if(progress==360){
clearInterval(i);
alert('listo');
}
},100);
}
</script>
</head>
<body>
<div id="e"><div id="c"><div class="r"></div></div></div>
</body>
</html>
Claro que con canvas sería más sencillo, pero esta es una manera ;)