动态循环进度条纯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; 
    } 
    });