web-dev-qa-db-ja.com

jQueryを使用した円形の進行状況インジケーター

円形の進行状況インジケーターが必要です。これをどのように実装すればよいですか？

私が探しているのは、jQuery UIの計画ページにあるものですが、まだ実装されていません。誰かがこれを以前に実装したことがあるかどうかだけに興味があります。次の画像の項目6を参照してください。

alt text

http://wiki.jqueryui.com/ProgressIndicator

jqueryprogress-bar
31
newbie

これらの1つ ？そのためのプラグインは必要ありません。必要に応じて.show()および.hide() GIFのみ（または、ボートに浮かんでいるものをDOMに挿入します）。

11
mpen

JQueryではありませんが、 Raphaël javascriptライブラリ、特に polar clock example 、および 'arc'カスタム属性をご覧ください。 RaphaëlとjQueryを一緒に使用して、静的な円形のプログレスバーを生成したことがありますが、非常にうまく機能します。

4
Matt Austin

JQueryを使用して背景の位置をスライドさせ、適切なCSSスプライト画像テーブルを使用または作成できます。

もちろん、100個のSpriteセルが必要です。そして、バックグラウンド位置座標のリストを多次元配列/テーブル/辞書にコンパイルする必要があります。

progressMeterSpriteCoords = [
 {x: 0, y: 0},      //0%
 {x: -16, y: 0},    //1%
 {x: -32, y: 0},    //2%
  ... etc etc..
 {x: -320, y: -0},  //19%
 {x: 0, y: -16},    //20%
 {x: -16, y: -16},  //21%
 {x: -32, y: -16},  //22%
  ... etc etc..
 {x: -320, y: -16}, //29%
  ... etc etc..
 {x: -320, y: -320} //99%
]
2
airtonix

何をロードしていますか？基本的な例は次のとおりです。

<div id="loading"></div>
<a href="javascript:void(0);" id="load">Load!</a>

<script type="text/javascript">
    $('#load').click(function(){ // click event on the load link
        $('#loading').html('<img src="/path/to/animation.gif" />'); // display a loading animation where the content goes
        $.get('/file/to/load.php', function(data) { // request content to be displayed
            $('#loading').html(data); // display content
        });
    });
</script>

乾杯

1
Claudiu