Ajax - データ処理中にインジケータを表示

FLASHやAJAXでのデータ処理中に、「しばらくお待ちください」とかインジケータ画像が出て、処理が終わるとそれらが消えて終わった旨を伝えるというものがあります。

静止画像や文字列だけであれば、CSSやJavascript（非AJAX）+PHPでなんとか出来るんですがアニメーションgifだとどうしても処理中は画像が止まってしまいます。

そこで今回はAJAXを利用して、データ処理中もアニメーション画像が動きつづけるように試してみました。

【Ajax】データ処理中にインジケータを表示してみた

テキストボックスに任意の文字列を入力して実行ボタンを押すとサーバで処理が行われて処理終了後、2秒待ってから処理終了の旨をメッセージ表示するというものです。

なんで2秒待つかというと、文字列を渡して受け取るだけなので、処理としては一瞬で終わってしまうのです。
だからインジケータ画像が表示されないんです（笑）
というわけで2秒程待つという処理を加えています。

なのでPHPファイルの処理はたったこれだけです↓

<?php
//データ受け取る
$data = htmlspecialchars($_GET['data'],ENT_QUOTES);
//$n秒待つ
$n = 2;
usleep($n*1000000);
echo "サーバは  ".$data."  を受信して、".$n."秒待ってから送出しました。"
?>

ですがAjax処理＆表示部分については、結果はたいしたことなくてもどうしてもソースは長くなりますね；；

これからはこういった些細な部分にも気を使わなきゃいけなくなってくるんですかねぇ・・・

何かしら参考になりましたらクリックをよろしくお願いします