Bar Indicator

JavaScript

数値をインジケーターで見やすく表示できる「Bar Indicator」

Bar Indicatorは数値をインジケーターで表示させることができるjQueryプラグインです。視覚的にどのくらいの数値なのかが瞬時に分かるのでとても便利ですね。シンプルなデザインで見やすいと思います。

Bar Indicator

デモ

特徴としては、オプションで様々なスタイルのバーにすることができることです。

横表示や縦表示はもちろん、バーの高さ、カラー、タイトル付けなどなどカスタマイズする上でも非常に役立つ機能がいろいろと用意されています。

バーの始点と終点に最小値・最大値を表示させたり、なんてことも可能です。

基本的な使い方は、jQuery本体とプラグインファイルを読み込んだ状態で、以下のようにHTMLを記述します。

<span id="bar">30</span>

あとはBar Indicatorを初期化してあげればOKです。

$('#bar').barIndicator();

シンプルな数値のバー表示から、ちょっとした複雑なカスタマイズを施したバーまで、応用次第でいろんなバリエーションが可能になるので、この手のプラグインを探している方には有力な選択肢の一つになりそうですね。

Bar Indicator

関連記事

  1. Scrollgress

    JavaScript

    スクロールに連動するプログレスバーを実装できる「Scrollgress」

    Scrollgressはスクロールに連動するシンプルで軽量なプログレス…

  2. Liquid Slider

    JavaScript

    タブパネル式のレスポンシブなjQueryスライダー「Liquid Slider」

    ちょっと珍しそうなスライダーを見つけたのでご紹介します。タブパネルにも…

  3. flexImages

    JavaScript

    軽量でFlickrやGoogle画像検索のようなギャラリーのjQueryプラグイン「flexImag…

    flexImagesというjQueryプラグインを使えば、軽量でレスポ…

  4. no-image

    JavaScript

    カードを入れ替えるような3Dアニメーションによるスライダー「stack-slider」

    stack-sliderはカードを入れ替えるような3Dアニメーションに…

  5. Monthly.js

    JavaScript

    レスポンシブに対応したカレンダーを実装できる「Monthly.js」

    Monthly.jsはレスポンシブに対応したシンプルで美しいカレンダー…

  6. FSVS(Full Screen Vertical Scroller)

最近の記事

  1. EH-NA0B
  2. KPS-88
  3. Happy Plugs AIR1
  4. cheero Stream 10000mAh
  5. BOSE HOME SPEAKER 300

アーカイブ

PAGE TOP