no-image

JavaScript

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

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

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

デモ

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

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

Bars

関連記事

  1. ScalableLightbox

    JavaScript

    ミニマルでレスポンシブに対応したLightbox風のjQueryプラグイン「ScalableLigh…

    ScalableLightboxはミニマルなデザインでレスポンシブに対…

  2. KGallery

    JavaScript

    縦や横に配置されたサムネイルから画像を選択できるjQueryの画像ギャラリー「KGallery」

    縦や横に配置されたサムネイルから画像を選択することができるjQuery…

  3. Jquery Tab Plugin

    JavaScript

    シンプルで見やすいタブパネルを実装できる「Jquery Tab Plugin」

    Jquery Tab Pluginはシンプルで見やすく、そして操作しや…

  4. JavaScript

    水面にゆらゆらと波打つ動きを与えてくれるjQueryプラグイン「lake.js」

    面白そうなプラグインだったので使ってみました。画像を指定するとその画像…

  5. flubber

    JavaScript

    滑らかなシェイプアニメーションを実装できる「flubber」

    flubberは、滑らかな2Dによるシェイプアニメーションを実装するこ…

最近の記事

  1. COMOLIの製品染ナイロン アノラックとトラックパンツ
  2. WH-XB900N
  3. Eufy RoboVac L70 Hybrid
  4. cheero Smart USB Charger 48W CHE-320

アーカイブ

PAGE TOP