一枚の画像だけでスタイリッシュなデザインのプログレスバーを実装するスタイルシートをBen Ogleから紹介します。
Simple CSS shiny progress bar technique
画像は、下記のようなグラデーションのある角丸の透過PNGを使用します。
プログレスバーの色は透過PNGを使用しているので、スタイルシートで簡単に変更できます。
HTML箇所は、divが3つ入れ子で実装されています。
また、JavaScript（jQuery）を使用して、バーが0%から100%になったり、カラーを少しずつ変更させるデモもあります。
Post on:2009年6月23日
