JavaScriptで読み込みページのプログレスバーを実装する

次のコードは、JavaScript でページ読み込み用のプログレスバーを疑似的に表現するものです。100 ミリ秒ごとに進捗を 2% ずつ増やし、同時にテキストボックスへ || を追加していき、100% 近くになると指定したページへ移動します。

<form name="loading">
  <p align="center">
    <font color="#ff0000" size="2" face="Arial">載入中，請稍等...</font><br>
    <input type="text" name="chart" size="46" style="font-weight: bolder; color: #ff0000;">
    <br>
    <input type="text" name="percent" size="47" style="color: #ff0000;">
  </p>
</form>

<script language="JavaScript">
<!--
var bar = 0;
var line = "||";
var amount = "||";

count();

function count() {
  bar = bar + 2;
  amount = amount + line;
  document.loading.chart.value = amount;
  document.loading.percent.value = bar + "%";

  if (bar < 99) {
    setTimeout("count()", 100);
  } else {
    window.location.href = "http://www.sina.com.cn/";
  }
}
//-->
</script>

注意が必要なのは、これはあくまで「疑似プログレスバー」であり、ページリソースの読み込み状況を実際に検出しているわけではないという点です。簡単な待機表示や、一定時間後にページ遷移する前にユーザーへ視覚的なフィードバックを与える用途に向いています。

現代のブラウザーの書き方により合わせるなら、font タグ、document.loading、スクリプトを囲む HTML コメント、文字列形式の setTimeout は避けることができます。

<form id="loading">
  <p style="text-align: center;">
    <span style="color: #ff0000; font: 12px Arial;">載入中，請稍等...</span><br>
    <input id="chart" type="text" size="46" style="font-weight: bold; color: #ff0000;">
    <br>
    <input id="percent" type="text" size="47" style="color: #ff0000;">
  </p>
</form>

<script>
let bar = 0;
let amount = "||";
const line = "||";
const chart = document.getElementById("chart");
const percent = document.getElementById("percent");

function count() {
  bar += 2;
  amount += line;
  chart.value = amount;
  percent.value = `${bar}%`;

  if (bar < 99) {
    setTimeout(count, 100);
  } else {
    window.location.href = "http://www.sina.com.cn/";
  }
}

count();
</script>

ページ上部の読み込み表示だけが目的なら、CSS で div の幅を制御する方法もあります。そのほうが、テキストボックスに文字を追加していくより自然です。

資料出典：

http://blog.csdn.net/sangliu/article/details/8718685