barre de progression circulaire dynamique pur CSS et HTML

Question

Je cherche une barre de progression circulaire dynamique en HTML en utilisant CSS qui choisir des valeurs à partir d'un fichier texte. Les valeurs seront quelque chose comme ceci 97.56,2.44. Donc, je veux que la barre de progression circulaire affiche vert pour la 1ère valeur qui dans ce cas est 97,56 et le reste du cercle doit être affiché en rouge.

j'ai lu quelques tutoriels en ligne, mais tous avaient des valeurs statiques dans le CSS. La raison pour laquelle je recherche une barre de progression si dynamique est que mon script python s'exécute sur un travail cron toutes les 5 minutes et que ces valeurs continuent à être mises à jour. Toute aide serait grandement appréciée. Merci

Answer 1

Essayez ce pourcentage = 97,56; Je ne suis pas familier avec python faire quelque chose comme valeur assign à <div class="progress-bar position" data-percent="echo percentage;" data-duration="1000" data-color="red,green"></div>

Dynamic Circular Progress Bar

Answer 2

asPieProgress est un plugin jQuery léger qui utilise SVG pour dessiner une barre de progression circulaire en forme de camembert animée avec affichage d'étiquettes de pourcentage et de texte. Le plugin est développé sous licence GPL.

échantillon

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