Responsive Gauge (CSS-Only) - HTML, CSS & JavaScript Tutorial 

One of the clearest walkthroughs I've ever watched on YT. Well done!

What a superb tutorial: clear, precise, not just the 'how' but also the 'why'. Thankyou!

2 values for one border radius? Total news flash to me! fantastic! Very nice idea, very tutorial, very nice presented! I like it a lot!

Amazing, just keep doing this tutorials, are for sure very helpful, love it

The best it can ever be explained. Thank you so much sir. Learnt CSS clearly today. keep up the good work.

Keep up the good work , clearly explained , clear thought process provided 🔥

Outstanding! Incredibly well explained. CSS is often a "write-only language" (like perl was once accused of being). It's often very hard to understand what a large chunk of CSS is actually doing. On the other hand, it's purely visual programming. That's what makes these sorts of high-quality, step-by-step visual explanations so incredibly satisfying. Thank you!

Awesome! 👌 you can also use for semicircle: border-radius: $div-width $div-width 0 0;

Good job guy !!!!!. Excelent, simple and it works perfectly

Clearly Explained everything. Thankyou!!

Thanks, great work. Really helpful.

Nice Tutorial as always. Can you do a tutorial on how to make the material design cycle effect when clicking on Tabs?

thank you so much!!!!! I needed a chart like that for something at work and your video saved my ass!! thank you so much

Easy to follow tutorial, dyslexic friendly and professionally conducted best of all it totally free and you can access the code should you have made any mistake that what I call quality code sharing for passion and not profit well done Dcode and keep up the hard work

Exceptional Work

thank you so much....it helped me a lot

well done bro lovely #from morocco

thanks for the tutorial

Ótimo vídeo parabéns 👍.

nice tutorial but why does gauge__cover horizontal placement has to be left :50%; transform: translateX(-50%); when left = 12.5%; does the exact same thing ?

Freaking amazing

Oh man ! You have a 18.734th subscriber😂😂❤

Good work bro🎉 can you do how to create a vertical gauge with values as a ruler!?

hey, any Idea on how I can add a pointer / numbers in the axis? thanks!

Thank you 😁

my guage doesnt display any values when using the function

How can i write markings indicating the percentage around the gauge?

I am having a problem with the gauge__cover class, it is positioning differently for me than it does in your demonstration, even when I copy the source code directly. Any help would be appreciated

How to allign the gauge to the center like the one you show as the preview?

How to show 2 or more data inside a gauge like half donut chart? Can we add more than 1 fill sections in it?

well.done 😎

How do I set the position/value of the half circle by simply clicking on a location on the semi circle?

Awesome! 👌 super....

Can you please demo another video by adding a needle. I have tried with turn but not working, i think deg is required for that. Please guide if possible

I tried putting this code inside a grid item within a grid and it did not position correctly. what would cause that?

How to make radius and show start and end value?

Very clear tutorial. Now I would like to have more than one gauge graph on a webpage. Is it feasible with your approach or am I limited to a single gauge in the page?

when you call the setGaugeValue() function why do you have to pass in the element as a parameter? it's not been used in the function... thanks in advance

nice

how to decrease size of this guage?????????

Why didn't you just set the gauge__cover left to 12.5%, it would have centered it.

How would I update the gauge dynamically through an input box if a user inputs a number? I've tried everything I can think of

your code works on me .. im asking how to change max value from 100 % to 500% im newbie in html im sorry for that

haha im here again

YOU NEED TO BE FAMILIAR WITH CIRCULAR GAUGE THE SITUATION: We copied the questionnaire from other website. - On original website - When the person finished the questionnaire she/he will see her/his score on the circular gauge. - On our website - we have the copy of the questionnaire and the copy of the circular gouge BUT there is no link, no formula that shows the score after person finished the questionnaire. WE NEED: to develop connection between result of finished questionnaire and the showing on the Gauge. What you will have: the name of the original website and our website. YOU CAN FIND THE FORMULA ON ORIGINAL WEBSITE OR YOU CAN DEVELOP THE FORMULA The only requirement for the formula - that result on OUR website will be SIMILAR to the ORIGINAL website.

I don't get your name because of your accent as I am from India. Can you write it out pls?

gauge.querySelector('.gauge__fill').style.transform = 'rotate(${value/2}turn)'; gauge.querySelector('.gauge__cover').textContent='${Math.round(value * 100)}%'; i cant get this to work properly . math.round shows up as text