CSS+JavaScriptで作る簡単なプログレスバーのサンプル

CSS+JavaScriptを使って、簡単なプログレスバーを作ってみました。戦略は以下のとおり。

バーとして使うアニメーションGIFを作成しておく。
1. サンプルでは→を用意して使いました。
プログレスバーとするdiv要素を用意し、CSSで
1. 背景画像として↑の画像を設定。
2. 背景画像のx座標を調整し、最初は非表示になるようにしておく。
3. また、widthを固定しておく。
進捗状況が変わった場合、JavaScriptで背景画像のx座標を更新し、バーを表示する。
1. ↓のサンプルではタイマーで200msごとに進めています。

ソースは次のとおりです。

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <script type="text/javascript">
  // メイン関数
  function main() {
    var bar = document.getElementById("progressbar");
    var progress = 0;
    // タイマーを使って定期的にプログレスバーを更新
    var id = setInterval( function(){
      progress++;
      if ( progress >= 100 ) progress = 0;
      // 進捗状況に応じてプログレスバーの背景gifの位置を再設定する。
      bar.style.backgroundPosition = -180+progress + " 0";
    }, 200 );
   }

  </script>
  <style type="text/css">
    body {
      background-color: #E2E2E2;
    }
    div#progressbar {
      border: 1px solid #66CCFF;
      width: 100px;
      height: 10px;
      background-image: url("./progressbar.gif"); /*背景画像としてアニメーションgifを指定*/
      background-repeat:repeat-y;  /*背景の繰り返しはx方向のみ*/
      background-position: -180 0; /*最初は非表示にしておく。*/
    }
  </style>
</head>
<body onload="main();">
  <!-- プログレスバーの表示領域 -->
	<div id="progressbar" />
</body>
</html>