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