Css Progress Bar - how to set colours

I’ve put together a material design progress bar based on these guidellines and this stackoverflow question:

It’s working fine but I’d like to set the colours using properties on the custom component. I suspect I need some javascript to set the css properties but my javascript expertise could best be described as ‘non-existent’

Can anyone help me out here?

Here’s a clone link: ProgressIndicator

I have a solution to this using css variables:

I’ve updated the demo app in case anyone else is interested.

4 Likes