javascript - progress bar stroke color -

i have progress has different stroke color depending on percentage. wanted have whole progress bar stroke have stroke color different percentage.

here fiddle want other 50% on red , other orange. cant seem find how can add color on it.

html:

<div id="container"></div> <div id="container1"></div> 

css:

#container, #container1 {     width: 100px;     height: 100px; }  #container > svg, #container1 > svg {     width: 100%;     display: block; } 

js:

var circle = new progressbar.circle('#container', {     color: '#fcb03c',     strokewidth: 5,     trailwidth: 1,     duration: 1500,     text: {         value: '0'     },     step: function(state, bar) {         bar.settext((bar.value() * 100).tofixed(0));     } });  circle.animate(.5);  // number 0.0 1.0   var circle = new progressbar.circle('#container1', {     color: '#fcb03c',     strokewidth: 5,     trailwidth: 1,     duration: 1500,     text: {         value: '0'     },     step: function(state, bar) {         bar.settext((bar.value() * 100).tofixed(0));     } });  circle.animate(.7);  // number 0.0 1.0 

on fiddle here. posibble on 2nd circle have blue animation same orange one? rather appearing in instant

try this:-

var circle = new progressbar.circle('#container', { color: '#fcb03c', strokewidth: 5, trailwidth: 1,     text: {     value: '0' }, step: function(state, bar) {     bar.settext((bar.value() * 100).tofixed(0));         } });  circle.animate(.5,function(){   $('#container path:first-child').attr('stroke','#4679bd').attr('stroke-width',5);  });   

demo