てんぽ

CSSのみでプログレスバーを再現したものにはアニメーションGIFを用いた例が知られているが、 実際に何かの進捗状況を反映してバーの進行度を変化させている例はほとんどない。 今回は、ブログでよくある2カラムレイアウトにおいて「サイドバー」の読み込み状況を反映して進行するプログレスバーの実装方法を提案する。

<div class="sidebar">

  <div class="blog-parts">
  （各種ブログパーツ）
  </div>

  <div class="blog-parts">
  （各種ブログパーツ）
  </div>
  （以下省略）

</div>

<div class="sidebar">〜</div>がサイドバーであり、その内容として複数の「ブログパーツ」（<div class="blog-parts">）が並んでいるとする。

WebブラウザはHTMLファイルを読み込んだとき、ソース文書の記述順に逐次内容をレンダリングしていく。 このとき、途中に読み込みに時間のかかるブログパーツが存在する場合、それ以降のレンダリングがストップするために、 サイドバーの内容のそれぞれが表示されるまでに時間差が生じる。

このレンダリングの遅延を利用してプログレスバーの進行を表現する。 具体的には、各種ブログパーツの後にそれぞれプログレスバーのパーツを記述し、 CSSのposition: absoluteで任意の場所に表示させる。 仮にプログレスバーの表示場所をサイドバーの最上部とするなら、サンプルコードは以下のようになる。

<div class="sidebar">

  <div class="progress-bar" id="box"></div>

  <div class="blog-parts">
  （各種ブログパーツ）
  </div>

  <div class="progress-bar" id="bar1"></div>

  <div class="blog-parts">
  （各種ブログパーツ）
  </div>

  <div class="progress-bar" id="bar2"></div>
  （以下省略）
</div>

.sidebar {
 position:relative; /* プログレスバーの位置の基準 */
}

.progress-bar {
 position: absolute; /* プログレスバーのパーツを同じ位置に置く */
 top:0;
 left:0;
 height: 20px;
 background: red;/* プログレスバーの背景色 */
}

#box {
 width: 100px; /* 進行度100%のときの幅 */
 background: white; /* 進行度0%のときの背景色 */
}

#bar1 {
 width: 10px;
}

#bar2 {
 width: 20px;
}

以下省略

サンプルコードは方法を説明するためだけのものであり簡略化しているが、 この手法を応用すれば、プログレスバーだけでなく、たとえば 女の子が少しずつ着衣していく（『リリカルなのは』の変身シーンのような）アニメーションも可能である。

言うまでも無く、この方法をそのまま用いると、見た目のためだけに多くの空divが必要になるので、あまりお勧めできない。 実際にやるなら、ネタとして割り切るか、ある程度の工夫が必要である。

ちなみにこのサンプルページでは、プログレスバーの進行をわかりやすく（＝サイドバーの読み込み速度を遅く）するため、 アフィリエイト広告やバナーを多めに貼っておいた。