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. Simple Easy Slider

    JavaScript

    美しいフェードスライダーを実装できるjQueryプラグイン「Simple Easy Slider」

    Simple Easy Sliderは美しいフェードアニメーションによ…

  2. qpScroll
  3. Animated Toggle Menu
  4. JavaScript

    ウェーブ(波形)を簡単に描いてくれるjQueryプラグイン「Wave」

    WaveというjQueryプラグインを使ってみました。これを使えばウェ…

  5. jQuery Sequency js

    JavaScript

    スクロールでビフォー・アフター画像を見比べれる「jQuery Sequency js」

    jQuery Sequency jsはスクロールでビフォー・アフター画…

  6. JavaScript

    jQueryでCSSを複数の値で設定するやり方やクラスの追加や削減など色々

    jQueryのCSS操作で複数の値を渡したい時はハッシュ形式にすると便…

最近の記事

  1. カメラマングローブ Grip Hot Shot III
  2. 包(つつむ)巾着ポーチ
  3. KMC-80BK
  4. 味噌ラーメン〜旨辛にんにく味噌〜

Instagram始めました

Facebookページ

PAGE TOP