Subtitle text for Circle Progress bar

[khankuan]

Right below the percent 👍

[kimmobrunfeldt]

Currently the API supports only adding text, which is (foolishly) assumed to be percent or similar.
I'd like to implement it so that you would give the center element either as HTML string or actual DOM element.

Since this is not supported in the API currently, you can do it your self by adding elements to the container.

The structure of HTML looks like this:

<!-- If text is set, position: relative will be applied for the container -->
<div id="container" style="position: relative;">

    <!-- The actual progress bar SVG -->
    <svg viewBox="0 0 100 100">
        <!-- Trail path -->
        <path d="M 50,50 m 0,-48.5 a 48.5,48.5 0 1 1 0,97 a 48.5,48.5 0 1 1 0,-97" stroke="#eee" stroke-width="1" fill-opacity="0"></path>

        <!-- Actual progress bar path -->
        <path d="M 50,50 m 0,-48.5 a 48.5,48.5 0 1 1 0,97 a 48.5,48.5 0 1 1 0,-97" stroke="#FCB03C" stroke-width="3" fill-opacity="0" style="stroke-dasharray: 304.844360351563px, 304.844360351563px; stroke-dashoffset: 304.844360351563px;"></path>
    </svg>

    <!-- Text element created when text option is set -->
    <p class="progressbar-text" style="position: absolute; top: 50%; left: 50%; padding: 0px; margin: 0px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: rgb(252, 176, 60);">0</p>
</div>

That HTML is produced from this initialization:

var circle = new ProgressBar.Circle('#example-percent-container', {
    color: '#FCB03C',
    strokeWidth: 3,
    trailWidth: 1,
    duration: 1500,
    text: {
        value: '0'
    },
    step: function(state, bar) {
        bar.setText((bar.value() * 100).toFixed(0));
    }
});

circle.animate(1, function() {
    circle.animate(0);
});

You should omit the text attribute and style the center div your self.

Here's an example how to do it:

JS: https://github.com/kimmobrunfeldt/progressbar.js/blob/ec4e711519900a41f1462a53ba045bde1a5805c1/scripts/example-clock.js

CSS:

progressbar.js/sass/examples.scss

Line 1 in ec4e711

#example-clock-container {

[khankuan]

Ah ic. Alrights thanks ;)

[kimmobrunfeldt]

I'll close this for now. If there will be more need to customize center element, I'll get back to this