ダイナミックサークルプログレスバー純粋なCSSとHTML

Question

テキストファイルから値を取り出すCSSを使用して、HTMLの動的循環プログレスバーを探しています。値はこの97.56,2.44のようなものになります。だから私は円形の進行状況バーは、この場合97.56と赤の表示される円の残りの最初の値の緑を表示したい。

私はオンラインでいくつかのチュートリアルを読んだが、それらはすべてCSSに静的な値を持っていた。私がこのような動的プログレスバーを探しているのは、私のpythonスクリプトが5分ごとにcronジョブで実行されており、これらの値が更新し続けるためです。どんな助けでも大歓迎です。ありがとう

Answer 1

= 97.56この 割合を試してみてください。 のpythonとイム慣れていない <div class="progress-bar position" data-percent="echo percentage;" data-duration="1000" data-color="red,green"></div>

Dynamic Circular Progress Bar

Answer 2

asPieProgressは、SVGを使用してアニメーションの円グラフのような円形の進行状況バーをパーセントとテキストラベルで表示する、軽量なjQueryプラグインです。このプラグインはGPLライセンスの下で開発されています。

サンプル

HTML：

<div class="pie_progress" role="progressbar" data-goal="100" aria-valuemin="0" aria-valuemax="100"> 
    <span class="pie_progress__number">0%</span> 
</div> 

JS

jQuery(function($) { 
    $('.pie_progress').asPieProgress({ 
    namespace: 'pie_progress' 
    }); 
    // Example with grater loading time - loads longer 
    $('.pie_progress--slow').asPieProgress({ 
    namespace: 'pie_progress', 
    goal: 1000, 
    min: 0, 
    max: 1000, 
    speed: 200, 
    easing: 'linear' 
    }); 
    // Example with grater loading time - loads longer 
    $('.pie_progress--countdown').asPieProgress({ 
    namespace: 'pie_progress', 
    easing: 'linear', 
    first: 120, 
    max: 120, 
    goal: 0, 
    speed: 1200, // 120 s * 1000 ms per s/100 
    numberCallback: function(n) { 
     var minutes = Math.floor(this.now/60); 
     var seconds = this.now % 60; 
     if (seconds < 10) { 
     seconds = '0' + seconds; 
     } 
     return minutes + ': ' + seconds; 
    } 
    });