Dynamic Circular Fortschrittsbalken pure CSS und HTML

Question

Ich bin auf der Suche nach einer dynamischen kreisförmigen Fortschrittsbalken in HTML mit CSS, die Werte aus einer Textdatei auswählen. Die Werte werden ungefähr so ​​sein wie 97.56.2.44. Also möchte ich, dass der kreisförmige Fortschrittsbalken grün für den ersten Wert anzeigt, der in diesem Fall 97,56 ist und der Rest des Kreises in rot angezeigt wird.

Ich lese ein paar Tutorials online, aber alle von ihnen hatten statische Werte in der CSS. Der Grund, warum ich nach einem solchen dynamischen Fortschrittsbalken suche, ist, weil mein Python-Skript alle 5 Minuten in einem Cron-Job läuft und diese Werte ständig aktualisiert werden. Jede Hilfe würde sehr geschätzt werden. Danke

Answer 1

Versuchen diese Prozentsatz = 97,56; Im nicht vertraut mit Python tun so etwas wie assign Wert <div class="progress-bar position" data-percent="echo percentage;" data-duration="1000" data-color="red,green"></div>

Dynamic Circular Progress Bar

Answer 2

asPieProgress ist ein leichtes jQuery-Plugin, das SVG verwendet, um eine animierte Kreisdiagramm-artige kreisförmige Fortschrittsleiste mit Prozent- und Textbeschriftungsanzeige zu zeichnen. Das Plugin wird unter der GPL-Lizenz entwickelt.

Probe

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; 
    } 
    });