CSSで円形のプログレスバーを再現してみる

- by konitter

これは、CSS Programming Advent Calendar 2012の9日目の記事です。 Advent Calendar初参加です。ていうか今日までの他の方の作品がスゴすぎて出すのもおこがましいんですけど、表題のようなものを作ってみました。

以下の環境で動作を確認しました。

  • Mac: Lion Chrome(23.0.1271.95)
  • Win: Windows7 Chrome(23.0.1271.95 m)

動くのはプログレスバーの部分だけで、他のボタンなどは動きません。。

仕組みを簡単に説明すると、

  • オレンジ色の円の上に白い半円を重なるように左半分に置き、それを360度回転させる
  • ただし、その半円が180度回転するまでオレンジ色の円の左半分が見えないように別の白い半円をかぶせて隠す
  • 最初の白い半円が180度回転したところで、さっきの別の白い半円をベースと同じオレンジ色に塗り替え、回転している白い半円が右半分に出ないようにベースの右側に移動させて隠す

はい、全然スマートじゃないやり方ですね。でもこのやり方しか思いつきませんでした。 もっと精進します。

明日10日目は、WebDelog@turusukeさんです。 よろしくお願いします!!