Build Gauge With HTML, CSS & JavaScript

Подписаться 5 тыс.

Просмотров 10 тыс.

50% 1

We'll create gauge | semi circular progress bar | semi donut whatever you may called. With the help of HTML, CSS and little bit of JavaScript we'll build gauge that can be used to visualize data. And also We'll learn CSS animation, so are you ready?
Subscribe my channel for more helpful videos:
🔔 / @codingdesign
CSS Animation 🎬 Playlist:
▶ • CSS Animation
🗃 Source Code :
✅ github.com/JeetSaru/Build-Gau...
😍 You may love my other contents too
Star Rating With HTML CSS & JS
✅ • Star Rating With HTML ...
Create skeleton loading animation with CSS & JS
✅ • Build Skeleton Loading...
🌎 Browser : Brave V.1.35 (Chrome V.98.0)
📝 Code Editor : VS Code
💠 Extensions : Live-server
#cssanimation #csstricks

Опубликовано:

17 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 26

@SLM-kz8tp 2 года назад

Impressive results. I think the dark theme looks better. Also, keep up the good work!

@CodingDesign 2 года назад

Thanks, will do!

@hw7727 9 месяцев назад

Well Done! Can you convert this to a speedometer, with if/ else ranges for the speedometer?

@CodingDesign 9 месяцев назад

👍Yes you can. You just need to calculate range of speed and dynamic angle & manipulate CSS code "transform : rotate()".

@raytorrance7190 2 месяца назад

Excellent tutorial! Great teacher and learned so much in such a small amount of time! Trying now to build it into an energy usage dashboard for a SCADA system but not sure how to link it to a numeric writable or variable output.

@CodingDesign 2 месяца назад

You can use "CSS Variables" and manipulate it with generated numeric data using JavaScript.

@hasithadhananjaya2806 Год назад

Best content you will be a best one

@CodingDesign Год назад

Thank you! 🙏 for your feedback. Show same l❤ve & support in the future too.

@mysteryguy7716 Год назад

ist there any way to controll the: "transform:" variable with php?

@CodingDesign Год назад

Yes you can😀. For example: In 📝 demo.php file, .test{ transform: }

@mysteryguy7716 Год назад

@@CodingDesign thanks a lot. This is the first time im ever used a variable in css

@CodingDesign Год назад

@@mysteryguy7716 You're welcome. Keep l❤ving & supporting.

@SteveRaynerMakes Год назад

I liked the dark theme best.

@CodingDesign Год назад

Thank you! 🙏 Show same l❤ve and support in the future.

@easylife5146 Год назад

Great work 🎊 🎉. Can you build a vertical gauge with values !?

@CodingDesign Год назад

Yes, soon

@vikasswamy3498 2 года назад

nice

@CodingDesign Год назад

Thanks! and keep ❤ supporting bro.

@rverm1000 Год назад

i ran into issues following along. so i tried the code at github. it doesnt work?

@CodingDesign Год назад

I've ✅checked "" but I'm sorry🙏 to inform you that everything is working perfectly. Can you elaborate the issues that you've encountered❓.

@rverm1000 Год назад

@@CodingDesign I get a blank page.

@CodingDesign Год назад

📢 I've "⏏ UPDATE" the code. Please 🙏once again 🡇 DOWNLOAD file from GitHub.👍

@dennisskliris2311 2 года назад

I did everything the video says but nothing showed up, I ended up with a blank page.

@CodingDesign Год назад

You might have misspell class name. Did you link your CSS & JS file properly?

@artaxerxes2363 2 года назад

I can't figure out why the two paragraphs don't show

@CodingDesign 2 года назад

Did you Check your JS & CSS code ? Especially, adding and removing 'Active Class". May be in 📝 style.css file, check out process.active { } & success.active { } If you've notice there is no any space between 'process', 'success' and 'active' class.