jquery進捗バープラグイン

JQMeter官方网址:公式サイトにアクセス
公式サイトでは、進捗バーが開始された後、JSでN回目に進捗値を変更する関数も見つからないので、一度だけ表示することをお勧めします.何度も変更しなければならない場合は、生成関数を何度も呼び出して、アニメーション時間を0に変更して、パーセンテージ表示を隠すことをお勧めします.効果は少し硬いようです.
注:このJSは公式サイトでダウンロードできます.
 
jQMeterは単純で実用的な軽量レベルのプログレスバーjQueryプラグインで、水平または垂直のプログレスバーとして表示できます.プログレスバーのロードにはアニメーションの特効があり、jQMeterオブジェクトのコンストラクション関数に簡単にパラメータを入力するだけで、目的のプログレスバー効果を達成することができます.
このプログレスバープラグインのコンストラクション関数では、プログレスバーの幅、高さ、背景色、プログレスバーの色などのパラメータを定義できます.これらのパラメータを使用すると、独自のプログレスバースタイルを構築できます.
使用方法
このプログレスバープラグインを使用するには、まずjQueryとjqmeterを導入する必要がある.min.jsファイル.
1 2 < script   src = "js/jquery.min.js"   type = "text/javascript" > script > < script   type = "text/javascript"   src = "js/jqmeter.min.js" > script >
HTML構造
このプログレスバープラグインのHTML構造は空のものを使用すればよい.
1 < div   id = "jqmeter-container" > div >
プラグインの初期化
ページのロードが完了したら、次の方法で進捗バープラグインを呼び出すことができます.
1 2 3 $(document).ready(function(){      $('#jqmeter-container').jQMeter(); });
注:この進捗バープラグインには、goalとraisedの2つの必須パラメータがあります.また、色パラメータなどのcssを使用して実装できるパラメータもあります.
1 2 3 4 5 6 7 $( '#jqmeter-container' ).jQMeter({      goal: '$1,000' ,      raised: '$200' ,      orientation: 'vertical' ,      width: '50px' ,      height: '200px' });
構成パラメータ
パラメータタイプのデフォルトの説明
goal stringにはデフォルト値がなく、パラメータ進捗バーの全長を入力する必要があります.「$9000」などの文字列、または「9000」などの整数に設定できます.
raised stringにはデフォルト値はありません.パラメータ進捗バーの現在の進捗状況を入力します.「$5000」などの文字列、または「5000」などの整数に設定できます.
width string 100%-水平幅.(水平プログレスバーで設定する必要があります)プログレスバーの水平幅を設定します.パーセントまたはピクセル値に設定できます
height string 50px.(垂直プログレスバーで設定する必要があります)プログレスバーの垂直高さを設定します.パーセントまたはピクセル値に設定できます
bgColor string#444プログレスバーの背景色.hex、rgba、色キーワードをサポートします.
barColor string#bfd 255進捗バーの色.hex、rgba、色キーワードをサポートします.
orientation string horizontal進捗バーの方向は、「horizontal」または「vertical」に設定できます.垂直プログレスバーに設定する場合は、パラメータを設定する必要があります.
displayTotal boolean true進捗バーの完了率を表示するかどうか.
animationSpeed integer 2000プログレスバーアニメーション時間、ミリ秒単位
counterSpeed integer 2000進捗バーカウントの時間、単位ミリ秒