1ページにつき小さな広告を1つだけ表示することをお約束します。ご安心ください。このメッセージを非表示にすると、二度と表示されなくなります。
種類
標準
標準のプログレスバー
ファイルのアップロード
表示中
表示プログレスバーは、タスクの現在の進行レベルを視覚的に示します
資金調達
コンテンツ
バー
進捗要素には、進捗状況を視覚的に示すバーを含めることができます
進捗
プログレスバーには、現在の進捗状況を示すテキスト値を含めることができます
ラベル
進捗要素にはラベルを含めることができます
ファイルのアップロード
状態
アクティブ
プログレスバーはアクティビティを表示できます
ファイルのアップロード
成功
プログレスバーは成功状態を表示できます
すべて正常に動作し、ファイルの準備ができました。
警告
プログレスバーは警告状態を表示できます
ファイルが最小解像度要件を満たしていません。
エラー
プログレスバーはエラー状態を表示できます
エラーが発生しました。
無効
プログレスバーを無効にすることができます
バリエーション
反転
プログレスバーの色を反転できます
ファイルのアップロード
成功
警告
エラー
添付
プログレスバーは要素の進行状況を表示できます
ララララ
サイズ
プログレスバーのサイズはさまざまです
極小
小
標準
大
特大
色
さまざまな色を使用できます
反転色
これらの色は、暗い背景とのコントラストを向上させるために反転することもできます
プログレスバーの初期化
メタデータ付き
プログレスバーはメタデータで初期化できます
$('#example1').progress();
74%の資金調達
Javascriptを使用
プログレスバーは、Javascript設定オブジェクトで初期化できます
$('#example2').progress({ percent: 22 });
22%獲得
タスク完了率
合計値の追加
プログレスバーは、現在の値を合計値の比率として追跡できます。これは、既知の量のイベントシリーズの進行状況を追跡するのに役立ちます。たとえば、「20枚の写真のうち1枚をアップロード中」などです。
incrementを呼び出すたびに、値が1ずつ、または2番目のパラメータとして指定された値だけ増加します
$('#example3') .progress('increment') ;
写真の追加
$('#example3') .progress({ total: 3 }) ;
メタデータを使用した初期化
プログレスバーは、現在の値を合計値の比率として追跡できます。これは、既知の量のイベントシリーズの進行状況を追跡するのに役立ちます。たとえば、「20枚の写真のうち1枚をアップロード中」などです。
incrementを呼び出すたびに、値が1ずつ、または2番目のパラメータとして指定された値だけ増加します
さらに、プログレスバーで使用可能な各状態のテンプレートテキストを渡すことができ、プログレスバーがその状態に達すると自動的に更新されます
$('#example4') .progress('increment') ;
写真の追加
カスタムラベルの追加
プログレスバーで使用可能な各状態のテンプレートテキストを渡すことができ、プログレスバーがその状態に達すると自動的に更新されます
label設定を使用して、2つのプリセットメッセージ間でプログレスバーラベルを変更できます。さらに、textにテンプレート化されたテキストを指定することで、メッセージ自体をカスタマイズできます。テンプレート化された文字列は、レンダリング時に3つの値を置き換えます
| {percent} | 現在のパーセンテージ |
| {value} | 現在の値 |
| {total} | 合計値 |
| {left} | 合計までの距離、または残りの進捗率 |
$('#example5') .progress('increment') ;
写真の追加
$('#example5') .progress({ text: { active : '{total}枚の写真のうち{value}枚を追加中', success : '{total}枚の写真がアップロードされました！' } }) ;
翻訳
文字列を翻訳して表示するために、テキストラベルを調整することもできます
$('#example6') .progress('increment') ;
ファイルの読み込み中
$('#example6') .progress({ label: 'ratio', text: { ratio: '{total}のうち{value}' } }) ;
動作
以下のすべての動作は、構文を使用して呼び出すことができます
$('.your.element') .progress('behavior name', argumentOne, argumentTwo) ;
| 動作 | 説明 |
|---|---|
| パーセントの設定(percent) | 現在の進行状況のパーセントを値に設定します。合計を使用する場合は、パーセントから推定値に変換します。 |
| 進捗の設定(value) | 進捗を指定された値に設定します。合計からパーセントを自動的に計算します。 |
| 増分(incrementValue) | 進捗をincrementValueだけ増やします。値が渡されない場合は、設定で指定されたランダムな量を使用します |
| 減分(decrementValue) | 進捗をdecrementValueだけ減らします。値が渡されない場合は、設定で指定されたランダムな量を使用します |
| 進捗の更新(value) | 進捗アニメーションインターバルの遅延を無視して、進捗を値にすぐに更新します |
| 完了 | 進捗を完了し、ロード済みを100%に設定します |
| リセット | 進捗をゼロにリセットします |
| 合計の設定(total) | 合計を新しい値に設定します |
| テキストの取得(text) | テンプレート化された文字列を値、合計、残りのパーセント、パーセントで置き換えます。 |
| 正規化された値の取得(value) | 合計で指定された許容範囲内の正規化された値を返します。 |
| パーセントの取得 | 最後に指定されたパーセントを返します |
| 値の取得 | 現在の進捗値を返します |
| 合計の取得 | 合計を返します |
| 完了しているか | 進捗が完了しているかどうかを返します |
| 成功しているか | 進捗が成功したかどうかを返します |
| 警告状態か | 進捗が警告状態かどうかを返します |
| エラー状態か | 進捗がエラー状態かどうかを返します |
| アクティブ状態か | 進捗がアクティブ状態かどうかを返します |
| アクティブ状態の設定 | 進捗をアクティブ状態に設定します |
| 警告状態の設定 | 進捗を警告状態に設定します |
| 成功状態の設定 | 進捗を成功状態に設定します |
| エラー状態の設定 | 進捗をエラー状態に設定します |
| 期間の設定(value) | 進捗アニメーションの速度を変更します |
| ラベルの設定(text) | 進捗の外部ラベルをテキストに設定します |
| バーラベルの設定(text) | 進捗バーラベルをテキストに設定します |
| アクティブ状態の解除 | 進捗のアクティブ状態を解除します |
| 警告状態の解除 | 進捗の警告状態を解除します |
| 成功状態の解除 | 進捗の成功状態を解除します |
| エラー状態の解除 | 進捗のエラー状態を解除します |
例
頻繁に更新されるプログレス
プログレスバーは、アニメーションの完了後に最後のプログレス値を自動的にポーリングします。そのため、更新イベントがUIの更新よりもはるかに頻繁に発生する場合でも、アニメーションのイージングはスムーズに機能し続けます。
高速更新ボタンを押すのを待っています
$('.rapid.example .ui.button').on('click', function() { var $progress = $('.rapid.example .ui.progress'), $button = $(this), updateEvent; // ゼロから再スタート clearInterval(window.fakeProgress); $progress.progress('reset'); // 完了するまで10msごとに更新 window.fakeProgress = setInterval(function() { $progress.progress('increment'); $button.text( $progress.progress('get value') ); // 完了したらインクリメントを停止 if($progress.progress('is complete')) { clearInterval(window.fakeProgress); } }, 10); }); $('.rapid.example .ui.progress').progress({ duration : 200, total : 200, text : { active: '{total} 中 {value} 完了' } });
プログレス設定フォーム設定はタブの動作を変更します
| 設定 | デフォルト | 説明 |
|---|---|---|
| autoSuccess | true | プログレスが完了したときに成功状態を自動的にトリガーするかどうか |
| showActivity | true | インクリメントされたときにプログレスが自動的にアクティビティを表示するかどうか |
| limitValues | true | trueに設定すると、100％を超えるか0％を下回る値は調整されます。falseに設定すると、不適切な値はエラーを生成します。 |
| label | percent | プログレスをパーセントまたは比率として表示するように設定できます。同じ名前の対応するテキストテンプレートと一致します。 |
| random |
className: { active: 'active', error: 'error', success: 'success', warning: 'warning' }
|
値を指定せずにインクリメントする場合、ランダムインクリメント値の範囲を設定します |
| precision | 1 | 計算されたプログレスの小数点以下の精度 |
| total | false | 合計値を設定すると、インクリメントの呼び出しごとにこの合計に近づきます（例：1/20、2/20など） |
| value | false | 現在の値を設定します。合計が指定されている場合、これは合計の比率を計算するために使用されます。パーセントの場合は、全体のパーセントにする必要があります。 |
コールバック
コールバックは、特定の動作の後に発生する関数を指定します。
| パラメータ | コンテキスト | 説明 | |
|---|---|---|---|
| onChange | percent, value, total | 進捗 | パーセンテージ変更時のコールバック |
| onSuccess | total | 進捗 | 成功状態のコールバック |
| onActive | value, total | 進捗 | アクティブ状態のコールバック |
| onError | value, total | 進捗 | エラー状態のコールバック |
| onWarning | value, total | 進捗 | 警告状態のコールバック |
DOM設定DOM設定は、このモジュールがDOMとどのようにインターフェースするかを指定します
| 設定 | デフォルト | 説明 |
|---|---|---|
| namespace | progress | イベントの名前空間。モジュールのティアダウンが要素にアタッチされた他のイベントに影響を与えないようにします。 |
| text |
text: { active: false, error: false, success: false, warning: false, percent: '{percent}%', ratio: '{total} 中 {value}' }
|
各状態のテキストコンテンツ。{percent}、{value}、{total}を使用した単純なテンプレートを使用します |
| regExp |
regExp: { variable: /\{\$*[A-z0-9]+\}/g }
|
モジュールで使用される正規表現 |
| selector |
selector: { bar: '> .bar', label: '> .label', progress: '.bar > .progress' }
|
モジュールで使用されるセレクタ |
| metadata |
metadata: { percent: 'percent', total: 'total', value: 'value' }
|
モジュールで使用されるDOMメタデータ |
| className |
className: { active: 'active', error: 'error', success: 'success', warning: 'warning' }
|
状態にスタイルを適用するために使用されるクラス名 |
デバッグ設定デバッグ設定は、コンソールへのデバッグ出力を制御します
| 設定 | デフォルト | 説明 |
|---|---|---|
| name | 進捗 | デバッグログで使用される名前 |
| silent | False | 他のデバッグ設定に関係なく、エラーメッセージを含むすべてのコンソール出力を無効にします。 |
| debug | False | 標準のデバッグ出力をコンソールに提供します |
| performance | True | 標準のデバッグ出力をコンソールに提供します |
| verbose | True | 補助的なデバッグ出力をコンソールに提供します |
| errors |
error: { method: '呼び出したメソッドは定義されていません。', nonNumeric: 'プログレス値は数値ではありません。' }
|
|