動態循環進度條純CSS和HTML

Question

我正在尋找HTML中使用CSS的動態循環進度條，它將從文本文件中選取值。值將是這樣的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是一個輕量級的jQuery插件，它利用SVG繪製一個帶有百分比和文本標籤顯示的動畫餅圖圓形進度條。該插件是在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; 
    } 
    });