Jquery Line Progress Bar

JavaScript

横棒の軽量なプログレスバーを実装できる「Jquery Line Progress Bar」

Jquery Line Progress Barは、横棒による軽量なプログレスバーを実装することができるjQueryプラグインです。アニメーション付きでシンプルなデザインがとても見やすく、オプションによるカスタマイズも可能になっています。

カラーや高さの設定なども可能

デモ

デモページには、Basic、Fill Color、Height、Radiusnessの4つのデモが用意されています。ベーシックなタイプのものから、カラー指定、高さ設定、radius設定したものがあります。

ページを読み込みプログレスバーが表示されると、そのバーの値に合わせてメーターが伸びていきます。このような、さりげないアニメーションを備えているところもいいですね。

使い方やオプションによるカスタマイズもすごくシンプルでわかりやすくなっています。

主なオプションは、percentage、ShowProgressCount、duration、fillBackgroundColor、backgroundColor、radius、height、widthです。

進捗度の動きを表すスピードやカラー、高さや幅などを手軽にオプションからセッティングできるようになっています。ちなみに、durationのデフォルト値は1000、fillBackgroundColorのデフォルト値は#3498db、backgroundColorのデフォルト値は#EEEEEE、heightのデフォルト値は10px、widthのデフォルト値は100%です。

というわけで、シンプルながらもカスタマイズしやすい軽量のプログレスバーを実装したいという人は、ぜひチェックされてみてはいかがでしょうか?

Jquery Line Progress Bar

PIGNOSE Calendar美しくてシンプルに使えるデートピッカー実装「PIGNOSE Calendar」前のページ

ワープするようなエフェクトを実装できる「Warp drive jQuery plugin」次のページWarp drive jQuery plugin

関連記事

  1. JavaScript

    テキストの一部分をサラっとアニメーションさせるjQueryプラグイン「dynamo.js」

    テキストで指定した一部分をサラっとアニメーションさせるjQueryプラ…

  2. plusGallery

    JavaScript

    Google+のような画像ギャラリーを実装できる「plusGallery」

    plusGalleryはGoogle+のような画像ギャラリーを実装する…

  3. Smooth Anchor Scrolling

    JavaScript

    ページ内リンクをスクロールできる「Smooth Anchor Scrolling」

    ページ内リンクをスムーズにスクロールできる「Smooth Anchor…

  4. no-image
  5. jquery.adaptive-backgrounds.js
  6. jqueryIntroLoader

最近の記事

  1. 成城石井 フレンチロースト
  2. COMOLI カシミアシルクニットパーカ
  3. 橋
  4. 梅と久保田城
  5. マワマット26

アーカイブ

PAGE TOP