CODEWITHSUNDEEP
javascriptjqueryhtmlcss
MIke
MIke

Reputation: 619

progress bar stroke color

I have a progress that has a different stroke color depending on the percentage. now i wanted to have the whole progress bar stroke to have a stroke color different from the percentage.

Here is the fiddle i want the other 50% to be on red and the other is orange. i cant seem to find how can I add a 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 from 0.0 to 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 from 0.0 to 1.0

On the Fiddle here. it is posibble on the 2nd circle to have the blue an animation same as the orange one? rather than appearing in an instant

Upvotes: 1

Views: 1982

Answers (1)

Umesh Sehta
Umesh Sehta

Reputation: 10683

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

Upvotes: 2

Related Questions