進捗の状態を表示するプログレスバー用のアニメーションgifの作成にあたって、本番環境での実際の動きを確認するのはなかなか難しいものがあります。重めの画像を読み込ませたりしても、二度目の表示ではキャッシュされて、あっという間に終わってしまうなどして…。

そこで、jQueryのanimate()を使ってプレビューすることにしました。上から3つがアニメーションgif。widthを2%から100%に設定。完了までの時間を順に4000（ミリ秒）から8000に設定。