no-image

JavaScript

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

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

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

デモ

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

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

Bars

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

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

関連記事

  1. infoBox

    JavaScript

    マウスオーバーでインフォメーションボックスを表示させる「infoBox」

    infoBoxはアイコンにマウスオーバーするとインフォメーションボック…

  2. Pongstagr.am

    JavaScript

    自分のインスタグラムの画像を表示できるjQueryプラグイン「Pongstagr.am」

    Pongstagr.amは自分のインスタグラムの画像をWebサイトに表…

  3. Wallpaper

    JavaScript

    背景画像のレイアウトをブラウザ幅に合わせてくれるjQueryプラグイン「Wallpaper」

    WallpaperというjQueryプラグインを使えば背景画像のレイア…

  4. SimpleCalculadora

    JavaScript

    シンプルでカスタマイズもできる電卓「SimpleCalculadora」

    SimpleCalculadoraはシンプルでCSS、オプションなどで…

  5. simple-calendar

    JavaScript

    イベント設定もできるシンプルなカレンダー実装「simple-calendar」

    simple-calendarは、イベント設定も可能なシンプルなカレン…

  6. JavaScript

    とてもシンプルで綺麗なツールチップを簡単に実装することができるjQueryプラグイン「gips」

    使いやすさや見た目もシンプルで綺麗なツールチップを実装することができる…

最近の記事

  1. タリーズ ハムチーズ&サラダサンド
  2. クリニカのY字タイプのフロス
  3. 日和山公園の桜
  4. 成城石井 フレンチロースト
  5. COMOLI カシミアシルクニットパーカ

アーカイブ

PAGE TOP