radialIndicator

JavaScript

シンプルな円形のインジケーターを実装できるjQueryプラグイン「radialIndicator」

radialIndicatorはシンプルで美しい円形のインジケーターを実装することができるjQueryプラグインです。数値に合わせて円形バーに色が表示されます。何かの割合や進捗度を伝えたい時によさそうですね。

radialIndicator

radialIndicatorの実際のデモは以下で確認することができます。

radialIndicator

デモ

こんな感じでボックスに数値を入力するとアニメーション付きで円形バーに色がついていきます。

円形バーに色がつく

上記は数字だけですが、以下のようにパーセンテージを表示させることもできます。

パーセンテージも表示できる

このようにオプションでカラーやパーセンテージの有効・無効を設定したりすることが可能です。

$('#sample').radialIndicator({
    barColor: '#87CEEB',
    barWidth: 10,
    initValue: 40,
    roundCorner : true,
    percentage: true
});

他にもサークル中央に表示される数字を非表示にしたり、数値の上限と下限を指定することができたりとカスタマイズ性にも優れています。

radialIndicator

CSSで文字の長さに合わせるCSSで文字の長さにwidthを合わせてbacgroundやborderを表示させるやり方前のページ

テキストエディットでリッチテキストから標準テキストに変更するやり方とショートカットキー次のページリッチテキストから標準テキストに変更

関連記事

  1. JavaScript

    jQuery illuminateを使えばボタンに光を加え点滅させたりして注目させることができる

    ちょっと面白そうだったので使ってみました。jQuery illumin…

  2. textfit.js

    JavaScript

    コンテナにテキストをフィットさせれるjQueryプラグイン「textfit.js」

    textfit.jsは、コンテナ内に表示するテキストをフィットさせるこ…

  3. roll.js

    JavaScript

    スクロールによるページネーション、進捗度、ポジションなどの値を取得できる「roll.js」

    roll.jsはスクロールによるページネーション、進捗度、ポジションな…

  4. JavaScript

    jQueryプラグインのレスポンシブなカルーセルのスライダー「Elastislide」を使ってみた

    jQueryプラグインで画面のサイズによってレイアウトを合わせてくれる…

  5. 3D Cube CountDown script
  6. Navigation

    JavaScript

    コンテンツを押し出してナビゲーションを表示する「Navigation」

    Navigationはコンテンツを押し出すかたちでナビゲーションを表示…

最近の記事

  1. 甘柿
  2. 冬用のふとん
  3. 田沢湖
PAGE TOP