読者です 読者をやめる 読者になる 読者になる
無料で使えるシステムトレードフレームワーク「Jiji」 をリリースしました!

・OANDA Trade APIを利用した、オープンソースのシステムトレードフレームワークです。
・自分だけの取引アルゴリズムで、誰でも、いますぐ、かんたんに、自動取引を開始できます。

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

JavaScript

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

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