Split % symbol from value

[kulbabskyy]

Hi, its is possible to split % symbol from value in the separated text node, to make it smaller and align the bar value to the center of progress bar?

Also will be great if we can place some text at the bottom of the value, like on the screenshot i attached. Thank You!

[tigrr]

You can do any formatting if you provide your own function for textFormat. I. e., for your screenshot:

const cp = new CircleProgress('.progress', {
    value: 33,
    max: 50,
    textFormat: (value, max) => `
        <tspan class="circle-progress-value-number" dx="7px">${Math.round(value / max * 100)}</tspan><tspan class="circle-progress-percent" dy="-1em">%</tspan>
        <tspan class="circle-progress-absolute-values" x="50" y="50" dy="2.1em">${value}/${max}</tspan>
    `,
})

See the entire demo.

[kulbabskyy]

Thank you for sharing this snippets. This is awesome! Its possible to make own layouts.

The current style on the demo link is very useful, maybe you will consider to add it in the lib?

[tigrr]

I surely will.

One thing to mention: if you use custom formatting, take care for sanitizing your variables, since it goes into innerHTML and may be used for XSS attacks. Inserting value and max is safe since they are formatted by Circle Progress. But for other values, especially coming from users, you should take special care.