[CSS]一枚の画像だけでスタイリッシュなプログレスバーを実装するスタイルシート

一枚の画像だけでスタイリッシュなデザインのプログレスバーを実装するスタイルシートをBen Ogleから紹介します。

Simple CSS shiny progress bar technique

画像は、下記のようなグラデーションのある角丸の透過PNGを使用します。

使用画像

プログレスバーの色は透過PNGを使用しているので、スタイルシートで簡単に変更できます。
HTML箇所は、divが3つ入れ子で実装されています。

また、JavaScript（jQuery）を使用して、バーが0%から100%になったり、カラーを少しずつ変更させるデモもあります。