プログレスバーの進行度を CSS で表現する

情報量の目安の伝達手段としてプログレスバーってのがある。例えばデータのローディング中に、データ読み込みの度合いを視覚的に表現したりってのはお馴染みだ。んでもって、プログレスバーを (X)HTMLCSS で作るとしたらどんな感じかなぁって思ったんで、ちょっと作ってみた。

<div class="progress">
        <div class="bar" style="width: 75%;"></div>
</div>

これに対して、下記のように CSS で指定する。

.progress {
        background: #ffffff;
        width: 500px;
        border: 1px solid #999;
}
.bar {
        background: #ddffbb;
        height: 20px;
        margin: 2px;
}

class="bar" の幅をインラインスタイルにしてプログレスバーの長さを指定しているんだけど、ここら辺を JavaScript とかでゴニョゴニョすれば良い感じなのかな。と、ここまでやっておいて、論理的なマークアップの観点からすると情報を全て CSS 側に委ねてしまっていて、(X)HTML の方はただの空 DIV じゃんって思ったら萎えた。

うーん、class="bar" 内に井桁(#)を数値分 10 桁単位で document.write して、CSS で color を class="bar" と同じ色を指定。はみ出した分はoverflow: hidden; とかすれば良いのかなぁ、良く分かんないけど:-P

この記事についての情報

似た内容の記事

この記事に対するトラックバック

トラックバックURL: http://www.lucky-bag.com/mt/mt-tb.cgi/120

Comments