Text in the middle of the circle

[robssonpeter]

How do I write the percentage of progress in the middle of the circle?

[artik]

Play with css:

                    .circle {
                        position: relative;

                        strong {
                            position: absolute;
                            transform: translate(-50%,-50%);
                            top: 50%;
                            left: 50%;
                        }
                    }

[Silloky]

@artik that is not valid css...

[Silloky]

@robssonpeter I had the same question; I looked around on the preview page and found this link : http://kottenator.github.io/jquery-circle-progress/examples.js

It details how each of the examples on the page work.

According to example 2 :

$('.second.circle').circleProgress({
    value: 0.6
}).on('circle-animation-progress', function(event, progress) {
    $(this).find('strong').html(Math.round(100 * progress) + '<i>%</i>');
});

This shows that the plugin doesn't natively set the inner text, but does create a text field for you to go and put whatever you want in there.
The plugin fires an event on the canvas' parent, which can be used to trigger, in your case, a text change in the middle.

Hope this helps

[Silloky]

Oh, didn't realise this issue was so old...

[vitoff34]

@robssonpeter I had the same question; I looked around on the preview page and found this link : http://kottenator.github.io/jquery-circle-progress/examples.js

It details how each of the examples on the page work.

According to example 2 :

$('.second.circle').circleProgress({
    value: 0.6
}).on('circle-animation-progress', function(event, progress) {
    $(this).find('strong').html(Math.round(100 * progress) + '<i>%</i>');
});

This shows that the plugin doesn't natively set the inner text, but does create a text field for you to go and put whatever you want in there. The plugin fires an event on the canvas' parent, which can be used to trigger, in your case, a text change in the middle.

Hope this helps

This does not seem to put text in the middle of it. Any fix? Thank you