@DIV
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<style type="text/css">
/*
  アニメーションの実体
  ※ フレームの最初と最後でどういう状態にするか
  ※ 同じアニメーションなら一つ定義して複数から参照する
*/
@-webkit-keyframes doing-rotate {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes doing-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@-o-keyframes doing-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes doing-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

doing {

  display: none;
  border-radius: 50%;	/* 元の形状を丸くする為 */

  font-size: 18px;	/* 位置指定を em でしているので、ここを変更すると半径変更 */
  width: 5px;		/* サイズ変更 */
  height: 5px;

  /* em を使うと、font-size にサイズを連動させる事ができる */
  /* width: .25em; height: .25em; */

  /* box-shadow による影の複数作成 : 位置と色と不透明度を指定 */
  box-shadow:
    0 -.4em       0 0 rgba(50,0,0,1),
    -.28em -.28em 0 0 rgba(50,0,0,.75),
    -.4em 0       0 0 rgba(50,0,0,.50),
    -.28em .28em  0 0 rgba(50,0,0,.25)
  ; 

}
</style>

<div style='position:relative;width:200px;height:200px;'>
<input type="button" id="start" value="start" />
<input type="button" id="stop" value="stop" />
<input type="button" id="move" value="移動" />
<doing style='position:absolute;left:100px;top:100px;'/>
</div>
<script type="text/javascript">
$.extend({
	ani_start: function(name) {
		$(name).css("display", "block")
			.css("-webkit-animation", ".85s doing-rotate steps(8) infinite")
			.css("-moz-animation", ".85s doing-rotate steps(8) infinite")
			.css("-o-animation", ".85s doing-rotate steps(8) infinite")
			.css("animation", ".85s doing-rotate steps(8) infinite");
		return $(name);
	},
	ani_stop: function(name) {
		$(name).css("display", "none")
			.css("-webkit-animation-name", "none")
			.css("-moz-animation-name", "none")
			.css("-o-animation-name", "none")
			.css("animation-name", "none");
		return $(name);
	},
	ani_move: function(name,x,y) {
		$(name).css("left", x+"px")
			.css("top", y+"px");
		return $(name);
	}
});

$("#start").click( function(){ $.ani_start("doing"); } );
$("#stop").click( function(){ $.ani_stop("doing"); } );
$("#move").click( function(){ $.ani_move("doing",50,50); } );

</script>
@END