no-image

JavaScript

さまざまなSVGパターンによるCSSプログレスバー「Bars」

Barsはさまざまな種類のSVGパターンによるCSSプログレスバーを実装できるのが特徴です。カラフルな模様や色をしたプログレスバーで、進捗度を楽しくチェックできるのがいいですね。アニメーションも滑らかで操作も手軽に行えます。

マウスオーバーでプログレスバーが伸びていく

デモ

デモではたくさんの種類のSVGパターンによるプログレスバーが用意されています。各プログレスバーにマウスオーバーすると、左から右へバーが伸びていきます。カラフルな模様によるバーがスムーズなアニメーションで伸びていくその動きはとてもオシャレですね。

また、SVGを使用しているので画面を拡大しても画像ファイルのように荒れることなく美しい状態を保持できるのも優れたポイントになります。多彩な模様を描けるプログレスバーだからこそ、SVGというメリットを大いに活かせるはず。

Bars

no-imageレスポンシブ対応の軽量・コンパクトでシンプルなモーダルボックス「Modelo」前のページ

シンプルでエレガントなモーダルボックスを実装できる「Fallr.js」次のページno-image

最近の記事

  1. 縦置きスタンド
  2. スマトラ
  3. さくらドーナツ
PAGE TOP