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
164 stars 43 forks source link

Half Circle Progress Like Guage #11

Open WajahatRana789 opened 2 years ago

WajahatRana789 commented 2 years ago

Hi @tigrr , Thanks for the library and it's working nice, I want to know is there any gauge feature in this library ?

Below is example picture...

half

tigrr commented 2 years ago

Hi, @wijju , unfortunately the gauge variant is not supported natively. I may add it in the future.

For now you can use a hack: set the start angle to 270 degrees, circle progress maximum (fake maximum) twice the real maximum, and cut the lower half of the widget. See this fiddle as an example.

This method has one drawback: the assistive technologies and web crawlers will see the fake maximum as maximum. Although, my tests with existing screen reader software shows that they don't support the maximum for any progress element (whether native or custom) anyway (which is a bug in the assistive technologies).