Barsはさまざまな種類のSVGパターンによるCSSプログレスバーを実装できるのが特徴です。カラフルな模様や色をしたプログレスバーで、進捗度を楽しくチェックできるのがいいですね。アニメーションも滑らかで操作も手軽に行えます。
マウスオーバーでプログレスバーが伸びていく
Barsの実際のデモ動作は以下のページから確認できます。
デモではたくさんの種類のSVGパターンによるプログレスバーが用意されています。各プログレスバーにマウスオーバーすると、左から右へバーが伸びていきます。カラフルな模様によるバーがスムーズなアニメーションで伸びていくその動きはとてもオシャレですね。
また、SVGを使用しているので画面を拡大しても画像ファイルのように荒れることなく美しい状態を保持できるのも優れたポイントになります。多彩な模様を描けるプログレスバーだからこそ、SVGというメリットを大いに活かせるはず。
シンプルなプログレスバーよりも派手でポップな印象を与えるプログレスバーを実装したい人は、ぜひSVGパターンを使ったCSSプログレスバー「Bars」を使われてみてはいかがですか？ Barsの詳細やダウンロードは以下のページからどうぞ。
