How To Make Circular Progress Bar Using HTML CSS JavaScript | Neomorphism Progress Bar
HTML-код
- Опубликовано: 9 фев 2025
- Learn How To Make Circular Progress Bar Using HTML CSS JavaScript | Make Neomorphism Design Progress Bar Step By Step
In this video you will learn how to make a progress bar, we will add gradient color in this progress bar. We will be using SVG circles to make this animation. Download the svg code from below link
Circle SVG code: drive.google.c...
❤️ SUBSCRIBE: goo.gl/tTFmPb
------------------------------------------
Recommended course:
❤️ Complete website Using HTML and CSS
✔️ 8 Complete website step by step
✔️ Source Code Download
✔️ 76 Lectures, 12 Hours Video
✔️ Course Completion certificate
👉 easytutorialsp...
-------------------------------------
Recommended Videos:
Learn Complete HTML and CSS from basics:
► • HTML And CSS Tutorial ...
Make A Complete Website for college using HTML & CSS:
► • How To Make A College ...
How to make a Business website step by step:
► • How To Make Website Us...
How to make personal resume website step by step:
► • How To Make A Website ...
How to make an Ecommerce Website Design:
► • How To Make eCommerce ...
How to make travel website design with HTML CSS Bootstrap:
► • How To Make A Website ...
-------------------------------------
Affordable web hosting (coupon- EASYTUTORIALS)
👉 easytutorialsp...
My recommended tools and tutorials
👉 easytutorialsp...
-------------------------------------
◼️ Source code link is shared in community post for all my coding videos exclusively for channel members (only channel members can see)
Join Channel Membership:
► / @greatstackdev
-------------------------------------
Like - Follow & Subscribe us:
◼️ RUclips: goo.gl/tTFmPb
◼️ Facebook: goo.gl/qv7tEQ
◼️ Twitter: / itsavinashkr
◼️ Instagram: / iamavinashkr
Thanks a lot for you explanation, their are many other tutorials for same output on RUclips but they have background music and just speed coding, yours was fantastically explained.
You are welcome!
Bro u r just awesome u r my ideal love u♥️♥️
Thank you so much brother
In setInterval interval will be 2000ms/65 = 30.77ms perfect calculation
perfect
Exactly.
why you take 2000ms at first place, can you explain?
@@abhaymaitra7032 When we set animation on circle we use 2s time for our animation i think thats why he use 2000ms /65
Your doing great bro, those are helpful in learning.
Nice video, thanks.
From Mozambique.
every time we see something new❤
Good, and thanks. Will probably ask more questions in future...
This tutorial is very useful and great. With your voice instructions and code together made this tutorial great 🔥❤️
thanks bro, that is really fantastic and practical
One of the best that i've seen.
Thanks indian guy from YT ⭐
really clean and functional
wow this is really awesome nice one sir I do really appreciate for sharing this one
thanks anna
Good, but. Why so many hardcoded things? in 20 min video you can do and show all the beauty of calculations in js, but didn`t
It's very useful for my website
THANKS A LOT!!!
this is what I have been looking for and found
happiness and good to you
Professionnel 🔥
Thank you so much brother.
You're welcome! 😊
Video is good and styling is too good. Just make the counter dynamic so that we can use multiple counter same time without giving static value.
You need to use js library fro that just like this ruclips.net/video/_8bJL55lBwA/видео.html
Awesome course, thankyou
I am happy watching your video and learning Html CSS and JavaScript,
for myself the JavaScript is very interesting and CSS is very innovating & interactive
you explain in such a easy manner , I just follow you step by step till the end of the video and learn so much thing from you
thanks for this video
I wish someone like you be my mentor to stay around and train me with this beautiful CSS and intellectual JavaScript in my life because you are amazing.
xD
Instead of using padding for the outer circle, use flex box instead: display: flex; justify-content: center; align-items: center; This will align things perfectly, whereas giving it a padding doesn't make the alignment straight.
This guy is just a genius, I personally call him the Messi of programming (web development). Just aspiring to be like u one day
tarifga til ojis
💯
Love u so much Sir
Just another incredible masterpiece!🔥
Hello Brother,
You are doing a great job for all beginners of web application development and try to do java script from scratch to high level course.
wow awsome design
Very helpfull video..
I just watched the entire video and admired your work , you truly are professional ! Thank you !
This is what i lookinf for
Super content and brillent explantion. Thx💫👍
U r great sir
Impressed boss
Nice video and presentation
When ever I see a tutorial from easy tutorial I give up.
thanks sir for this video.
The final result was beautiful !!! tysm!!1
Osm bro 👍🏻
stroke dasharray should be 439.8 = 2*70*3.14
472 is wrong
graet course thanks alot
it really helped me
Cool
Amazing 🥰🥰☺️
Thanks Amit, Glad you like this progress bar design tutorial
@@GreatStackDev welcome 😊sir ,Tnx for your response
Thank you so much keep it up!
Good job..
nice work
Hoping to see more videos involving Javascript
Thanks again helpfull
plzz make more on JavaScript plz
Awesome!!!
Good job bro
Taught like magic...🤩
Thanks for video
best toturial
Bro i really thanks to you 🤗❤️
nice tutorials....please, make a video on news portal website
yes please do so
what microphone you are using your voice very clear
super😃😃😃😃😃😃😃
Thank you!!!
great tutorial as usual ;) Thank you so much ❤
You did a wonderful job man great work
very good
Thank you sir
If you want the progress indicator to start from the top and go clockwise then do this : Write transform="rotate(-90 cx cy)" in the circle tag itself where cx and cy define the center of your circle element.
thanks alot
This was awesome and super interesting! Thank you very much.
Pls make a bootstrap website video ... pls 🙏🙏🙏🙏...
Facebook ,twitter ,insta using bootstrap classes ... pls ...waiting...💓
Hello sir , I need a help . I created one progress bar . Can u please tell me how to create multiple progress bar in one page .. I wanna create 5 progress bar
Have you created multiple progress bars with different percentages? If you created means please tell me how to create it?
good post, must share the source code on these type of guides
Sorry, I can't put the code link in public, People just download it and close the video without watching it, Then what's the use of making video tutorials, if you really want to learn please watch the video then try to make it yourself, if you get any issue you can email me
@@GreatStackDev I really understand you! for me, there was no time to try code by watching, at least a demo link would be good to see how it works. But it's fine I've found the same concept article shared with a code. thanks for your reply.
If want to make it for a percentage that varies. Like one it may be 65 and other time it may be 30 and so on. How do I do that ?
thank you
This video is awesome. Sir, I've a request, please make a video on SVG and CANVAS in html.
Make full video on zomato page.Please sir
#respect
Sir please make full course on java script with beginner level to high level please sir
Neumorphism progress bar looks great. But your progress bar looks like 75% not 65%. Circumference of your circle is 2 * 70 * 3.14 = 439.6, you should set stroke-dashoffset to 156 to get the proper percentage of your circle.
@Future Chib 70 is the radius of the circle
circumference of inner or outer circle ? Also how to calculate that 472 dasharray?
Almost awesome
nice
Thank you for this awesome video. I would love to see a video made using css grid as well. Please recommend me one if you have. I need to c a website u make using css grid. Thank you.
so if i want to start from 90 deg how can i do that ?
please share us full javascript course........
Nice, please make udemy clone. Please
thanks
Thank you! It was very interesting for me. How we can to do this animation whith hover?
Спасибо большое урок был невероятно полезен
Give us Bootstrap Website Video..
Sir plz create full landing page desgin and portfolio desgin made some video plz sir and restaurants web design video plz sir love from Pakistan and responsive
Hello,
When you removed font-weight "px" your number isn't going from 0-65 just the bar is moving. Check 18:43. Same problem when I did this.
hi, great tutorial. question, how 18:45 can i make a dynamic number here? i want 65% to be a variable, pls help
Use formula in 11:23
Stroke-dashoffset:calc(472-(472*var(--number))/100;
Can you please make a video about how to add preloader in wix.
❤️❤️❤️❤️
And then??? Am i missing something?
What if you have different percentages? How do you change this css value in the keyframe-animation via Javascript? cause otherwise you'd have to stick with the hardcoded 65% which is kinda useless..
Bump ! how do you make the keyframes value dynamic ?
@@jaimeperry7326 In the end i created sth similar with javascript canvas to achieve this animation with dynamic percentages.
Achei inviável pra um projeto qualquer. Muito código.
drive.google.com/file/d/1e3cvVNJA1hpKOtS8ADS55fZua6JM3QKr/view?usp=sharing
@@ashutoshpotdar7411 Thank u SO MUCH! ⭐
Hi thank you so much for the tutorial! Idk if you did this before but if you didn't can you please show how to do a slideshow not as background just a slideshow using html and css only
Bro Make a Website like Dream11
Can you make a video showing in the same way the real % of the uploaded file/page?
Thank you!
How can i change circle gradient color to green colour ?
Goib
12:52 'anim' animation is not playing.. plz hep me..
dear mentor,
I'm suffering from the javascript function.
if u upload a video that only functions with simple versatile events or a single example with all types of functions.
basically, I want to do creating functions where it needs. thanks for your channel.
Wow