animated_status_bar.html

<svg xmlns='https://www.w3.org/500/svg' width='100%' height='100%' viewBox='0 0 40 40'> 
  
  <defs>
    <linearGradient id='gradient' x1='100%' y1='0%' x2='5%' y2='5%' spreadMethod='pad'>
      <stop offset='0%' stop-color='#17D500'/>
      <stop offset='100%' stop-color='#D50000'/>
      
      
    </linearGradient>
  </defs>
  
  
  <style>
    
    .rail {
     stroke: rgba(96,96,96,0.5) 
     
    }
    
    .progress {
      stroke: url(#gradient);
      filter: drop-shadow(0.5px 0.5px 1px #FC466B);
      stroke-linecap: round;
      animation: progressbar 3s;
      
    }
    
    .progress-text {
      font-size: 0.7em;
      font-family: Trebuchet MS, sans-serif;
      font-weight:bold;
      fill : white;
      
    }
    
    .progress-name {
      font-size:0.3em;
      fill : white;
      
    }
    
    @keyframes progressbar {
      from {
        stroke-dasharray: 0, 100;
        
      }
      to
      
      {
        stroke-dasharray: "& [avg_valence]&", "& 100 - [avg_valence] & ";
      }
      
    }
    
  </style>

  <circle class='rail' cx='20' cy='20' r='16' stroke-width='1' fill='transparent'> </circle>
   <circle class='progress' cx='20' cy='20' r='16' stroke-width='2' fill='transparent'  stroke-dasharray='"& [avg_valence] &" "& 100 - [avg_valence] &"' stroke-dashoffset='25'> </circle>
  
 <g class='progress-text'>
   <text y='50%' transform='translate(0,2)'>
     <tspan x='50%' text-anchor='middle' class='progress-percent'> "& ROUND([avg_valence],0) &" %</tspan>
   </text>
   
   <text y='60%' transform='translate(0,2)'>
     <tspan x='50%' text-anchor='middle' class='progress-name'> Valence </tspan>
   </text>
   
  </g>

</svg>