radialIndicator

JavaScript

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

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

radialIndicator

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

radialIndicator

デモ

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

円形バーに色がつく

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

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

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

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

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

radialIndicator

関連記事

  1. CSS3 Menu Slider
  2. JavaScript

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

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

  3. jQuery Video Extend

    JavaScript

    動画をチャプターごとに区切れる「jQuery Video Extend」

    jQuery Video Extendは動画をチャプターごとに区切った…

  4. stacky

    JavaScript

    スライドダウン・スライドアップしてコンテンツを整理できるjQueryプラグイン「stacky」

    stackyというjQueryプラグインを使えばコンテンツをスライドダ…

  5. FitVids.JS

    JavaScript

    YouTubeやVimeoからの埋め込み動画をレスポンシブにするjQueryプラグイン「FitVid…

    YouTubeやVimeoからの埋め込み動画をレスポンシブに対応させる…

最近の記事

  1. ジェットストリームの三色ボールペン(+シャーペン付き)と黒の替芯
  2. ブラジルイパネマ
  3. 梅しば
  4. BM-IBCDH13RD

アーカイブ

PAGE TOP