最近、リングプログレスバーと同様のこの種の効果は、0から100％の終了までの会社のプロジェクトで使用されています。アニメーションの結果は常に100％のままであり、データ関係のために途中で留まりません。
示されているように
コードは次のとおりです
demo.html
<イニシャルスケール= 1.0 "> <title> demo </title> <style> .rad-prg {position：relative;}。rad-con {position：aspolute; z-index：1; top：0; text-align：center; width：90px; height：height：90px; padding：10px; fort-family： yahei ";} </style> </head> <body> <div id =" indicatorContainer "> <div> <p> ￥4999 </p> <p>アカウントの概要</p> </div> <スクリプト=" text/javascript "src =" src = "js/jquery.min.js"> </scrip> <> <> < src = "js/radialindicator.js"> </script> <script> $（ '＃indicatorContainer'）。radialIndicator（{barcolor： '＃007aff'、barwidth：5、initvalue：0、roundcorner：true、perponeporage：true、displaynumber：50}; $（ '＃indicatorContainer2'）radialindicator.jsこれはjQueryのプラグインです
/*RADIALINDICATOR.JS V 1.0.0AUTHOR：Sudhanshu Yadavcopyright（c）2015 Sudhanshu Yadav -Ignitersworld.com、Ignitersworld.com/lab/radialindicator.html*/;( $、windoct、curction Topvar circ = math.pi * 2、quart = math.pi/2; // hexをrgbfunction hextorgb（hex）に変換する機能からバーを開始する{// shorthand form（eg "0033ff"）に拡張（ "0033ff"）var shorthandregex = var shorthandregex = /^＃？（[af/d]）（[af/d]）（[af/d]）（[af/d]）$/i; hex = hex.replace（shortthandregex、function（m、r、g、b）{return r + r + r + g + g + b + b;}）; var result =; /^#?(f/d員} )( [af/d] (2/d] {2}）済みの結果（結果[1]、16）、パーセント（結果[2]、16）、parseint（result [3]、16）] Math.Round（BottomRange +（（Toprange -bottomRange） * curshift/pershift）;} //関数getCurrentColorの場合に現在の色を取得する（bottomval、topval、bottomcolor、topcolor）{var rgbarytop = topcolor.indexof（ '＃'）！= -1？ topcolor.match（// d+/g）、rgbarybottom = botondcolor.indexof（ '＃'）！= -1？ 'rgb（' + getPropval（curshift、pershift、rgbarybottom [0]、rgbarytop [0]） + '、' + getPropval（curshift、pershift、rgbarybottom [1]、rgbarytop [1]） + ' + rgbarytop [2]）+'）';} // ObjectFunction Merge（）{var arg = arguments、ターゲット= arg = arg [0]; for（var i = 1、ln = arg.lent; i <ln; i ++）{var obj = arg [i]; for（bar k in obj）{if（obj.hasownproperty（k） obj [k];}}} return target;} //パラメーター機能のフォーマッタ（パターン）に応じて数値のフォーマットを適用する{if（！pattern）return num.toString（）; num = num || num || 0、lasthashReplaced = 0; // numbersfor（var ln = output.length; i <ln; i ++）{if（numrev.length）break; if（output [i] == "）{lasthashReplaced = i; output [i;）= numrev.shift（） prefixoutput.splice（lasthashreplaced+1、output.lastindexof（ '＃'） - lasthashreplaced、numrev.reverse（）。join（ ""））; return output.reverse（）。join（ ''）;}} // circle bar classfunction（indoption、indoption） {}; indoption = merge（{}、radialindicator.defaults、indoption）;コンテナ[0]; container = container; // Canvas elementvar Canelm = document.createelement（ "Canvas"）; container.appendChild（Canelm）; this.canelm = canelm; this.current_value = indoption.initvalue ||。 2、// heightcenter = dim // xとyの両方の軸を作成します。 formatter（indoption.maxvalue）.length; canelm.width = dim; canelm.height = dim; 0、2 * math.pi）; ctx.stroke（）; //グレイサークルの後に画像データを保存します。 （val === undefined || isnan（val））{return this.current_value;} val = parseint（val）; var ctx = this.ctx、indoption = this.indoption、curcolor = indoption.barcolor、dim =（indoption.radius + indoption.barwidth） indoption.minvalue、maxval = indoption.maxvalue = dim /2; indoption.perval + '％'：this.formatted value // objectthis.current_value = val; // （var i = 1、ln = range; i <ln; i ++）{var bottnval = range = culcolor = curcolor = curcolor [topval]、newcolor = val == bottcolor GetCurrentColor（Val、Bottomval、Topval、Bottomcolor、Topcolor）：Topcolor：false; if（newcolor！= false）{curcolor = newcolor;}} // "round"; ctx.beginpath（）; ctx.arc（center、center、indoption.radius、（quart）、（（circ） * perval/100） - Quart、false）; ctx.stroke（）; // addパーセンテージテキスト（indoption.displaynumber）{var cfont = ctx.font.split（ '' '' '' '' '' '' '' '' '' '' '' ''） indoption.fontweight、fontsize.fontsize ||（this.floor（this.maxlength*1.4 / 4）-1）; cfont = indoption.fontfamily || curcolor; ctx.font = weight + "" + fontsize + "px" + cfont; ctx.textalign = "center"; ctx.textbaseline = 'middle'; ctx.filltext（dispal、center、center）; this.current_value ||。 startif（this.intvfunc）clearinterval（this.intvfunc）; val;}} self.value（counter）; this.option [key]; if（['radius'、 'barwidth'、 'barbgcolor'、 'format'、 'maxvalue'、 'パーセンテージ']。 **/function radialindicator（container、options）{var progobj = new indicator（container、options）; progobj.init（）; return progobj;} // defaultsradialindicator.defaults = {radius：50、//内側半径のインジケータbarwidth：5 ColorBarcolor： '＃99cc33'、//塗りつぶされたバーの色は、{0： "#ccc"、50： '＃333'、100： '＃000'}形式などの異なる値の異なる色を持つ範囲になります。別のフラメナム：null、//インジケーターのフレームの数を定義します。パーセンテージを表示する場合は100にデフォルトです。 rangeSpercentage：false、// valuedisplaynumberの割合を表示：//表示インジケーター番号roundcorner：// false、//塗りつぶされたbarminvalue：0、//最小値のvalueInitvalue：//最大値valueInitvalue：0 //インジケーターの初期値を定義します} {$ .fn.radialindicator = function（options）{return this.each（function（）{var newpcobj = radialindicator（this、options）; $。データ（this、 'radialindicator'、newpcobj）;};};}}}（window.jquery、window、document、void 0）;上記は、編集者によって導入されたJS実装リングプログレスバー（0〜100％）の効果です。私はそれが誰にでも役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は、すべての人に時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！