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

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

スポンサーリンク

スポンサーリンク

アクセスランキング

Tags

Archives