CSS3だけで作るプログレスバー「CSS3 Progress Bars」
CSS3 Progress BarsはCSS3を使ってプログレスバー表示を行います。
最近、複雑な表示ですらCSSだけでこなしてしまうようなハックが流行っていますが、CSS3 Progress BarsはCSS3だけを使ってプログレスバーを表示します。
表示例です。角丸や複数の組み合わせ表示ができます。
さらに細めのタイプもあります。
コードです。styleのwidthでバーの長さを指定します。
色の指定もclass名でできます。
組み合わせの場合はこんな感じです。
細いタイプは_tinyをつければOKです。
CSS3 Progress BarsはCSS3だけでプログラレスバーを生成しているのでJavaScriptなどで動いたりするようにするのも簡単に実現できそうです。
CSS3 Progress BarsはCSS3製、MIT Licenseのオープンソース・ソフトウェアです。
MOONGIFTはこう見る
JavaScriptで作られている場合、デフォルトの表示や予め用意されている範囲内でカスタマイズするのは簡単なのですが、多少こだわった表示をしようと思った場合に非常に面倒になるケースが多いです。その点、CSSであればプログラミング要素がないので大きさを変更したり、色を変更するくらいなら簡単にできるでしょう。
JavaScriptとCSS、どちらを使うかはそれぞれ適した場合がありますが、片方でしか実現できないというのはネックになることがあります。両方のテクニックを知っておけば、いざという時に必ず役立つはずです。選択肢を多く持っておけば、それだけ最適な解決策を低コストに実現できるでしょう。