search

tigrr / circle-progress

Responsive, accessible, animated, stylable with CSS circular progress bar available as plain (vanilla) JS and jQuery plugin.
https://tigrr.github.io/circle-progress
MIT License
171 stars 44 forks source link

Changes not working in html #24

Closed KaviHarjani closed 1 year ago

KaviHarjani commented 1 year ago

Hello tigrr,

Thank you for the great library, it's truly awesome,

However I am unable to use it in html could you please help me out? I am using html, css and vanilla javascript

It doesn't change the text format to percentage,

Or take the css,

I want to apply this css

.circle-progress-value { stroke-width: 6px; stroke: white; stroke-linecap: round; } .circle-progress-circle { stroke-width: 8px; stroke: #888; } .circle-progress-text { fill: #888; }

You can find my fiddle here https://codepen.io/kaviharjani/pen/VwgYroZ

Thank you

tigrr commented 1 year ago

Hello, Kavi,

Thank you for your kind words.

Some attribute names are different than the corresponding property names. Property names are camelCased, whereas attribute names are kebab-cased. If text format is set as a JavaScript property, it is textFormat; and if it is set as an HTML attribute, text-format should be used instead. Please, refer to the properties / attributes table for the property and attribute names.

For CSS you have to use parts like so: circle-progress::part(value) { ... }. See the Styling section in the docs.