radialIndicator

JavaScript

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

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

radialIndicator

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

radialIndicator

デモ

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

円形バーに色がつく

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

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

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

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

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

radialIndicator

関連記事

  1. Shorten

    JavaScript

    長いテキストを自動で短縮してくれるjQueryプラグイン「Shorten」

    Shortenは指定した文字数以上の長いテキストを自動的に短縮してくれ…

  2. Timeliny

    JavaScript

    レスポンシブ対応の年ベースによるjQueryタイムライン「Timeliny」

    Timelinyはレスポンシブに対応した年ベースによるタイムラインを実…

  3. JavaScript

    フォーム内にあるplaceholderの利便性を高めてくれるjQueryプラグイン「FlowupLa…

    フォームを入力する際にあると便利なのがplaceholderです。しか…

  4. Toast

    JavaScript

    アニメーション付きでスタッキングしていくメッセージ通知「Toast」

    Toastはアニメーション付きのメッセージ通知を表示することができるj…

  5. S-Pagination

    JavaScript

    スライダー付きのページネーションを実装できる「S-Pagination」

    S-Paginationはスライダー付きのページネーションを実装できる…

  6. jQuery Star Flashing Effect

最近の記事

  1. ルック セレクション
  2. シルキーウインドモバイル
  3. アリエール パワージェルボール3D
  4. NuAns × Shibaful TAGPLATE

アーカイブ

PAGE TOP