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. MG Space

    JavaScript

    Google画像のようなアコーディオンプラグイン「MG Space」

    MG SpaceはGoogle画像のようなjQueryアコーディオンプ…

  2. Hero slider

    JavaScript

    レスポンシブで横幅フルサイズのスライダーを実装できる「Hero slider」

    Hero sliderはレスポンシブに対応した横幅フルサイズのスライダ…

  3. TextTailor.js

    JavaScript

    コンテナ内のフォントサイズを自動リサイズしてくれるjQueryプラグイン「TextTailor.js…

    TextTailor.jsはブラウザ幅に合わせてコンテナ内のテキストの…

  4. jQueryTween

    JavaScript

    軽量で軽快なアニメーションをするjQueryプラグイン「jQueryTween」

    jQueryTweenは軽量で軽快なアニメーションを実装することができ…

  5. RV gallery-slider

    JavaScript

    軽量でタッチフレンドリーなギャラリースライダー「RV gallery-slider」

    RV gallery-sliderは軽量でタッチフレンドリーなギャラリ…

  6. Easy Responsive Tabs to Accordion

    JavaScript

    レスポンシブ対応のタブとアコーディオンで切り替わるjQueryプラグイン「Easy Responsi…

    今すぐにでも使いたいjQueryプラグインを見つけたので備忘録。レスポ…

最近の記事

  1. DCG-CA21
  2. Apple WatchでのMacロック解除を無効
  3. オータムスイートポテトフラペチーノ
  4. 紅葉
  5. ナノケア EH-NA0E

アーカイブ

PAGE TOP