Having trouble with text value

Using some code I found on the demo. Mostly got it to do what I wanted but I cannot get the text property to appear in the center. Can you tell me what I am doing wrong?
```
var startColor = '#FC5B3F';
var endColor = '#467fcf';

window.onload = function onLoad() {
var circle = new ProgressBar.Circle('.progress', {
color: startColor,
duration: 1500,
easing: 'bounce',
strokeWidth: 3,
text: {
value: 'Text'
},

// Set default step function for all animate calls
step: function(state, circle, bar) {
circle.path.setAttribute('stroke', state.color);
bar.setText((bar.value() * 100).toFixed(0));
}
});

// This will get the number from the page
var value = ($('.progress').attr('value') / 100);

// This will determine the circumference of the circle
circle.animate(value, {
from: {color: startColor},
to: {color: endColor}
});

};
```

Start with the demo example and the ProgressBar.Circle configuration shown in the issue, then inspect the rendered .progress element in a browser. Verify how the text option and surrounding styles affect placement; done means the displayed text is centered during the animation and the example works without regressions.

Written by the indexing model from the issue text.