How To Make Circular Progress Bar Using HTML CSS JavaScript | Neomorphism Progress Bar
Vložit
- čas přidán 28. 08. 2024
- 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:
◼️ CZcams: goo.gl/tTFmPb
◼️ Facebook: goo.gl/qv7tEQ
◼️ Twitter: / itsavinashkr
◼️ Instagram: / iamavinashkr
In setInterval interval will be 2000ms/65 = 30.77ms perfect calculation
perfect
Exactly.
why you take 2000ms at first place, can you explain?
Thanks a lot for you explanation, their are many other tutorials for same output on CZcams 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
every time we see something new❤
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 czcams.com/video/_8bJL55lBwA/video.html
This tutorial is very useful and great. With your voice instructions and code together made this tutorial great 🔥❤️
Thank you so much brother.
Your doing great bro, those are helpful in learning.
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.
Nice video, thanks.
From Mozambique.
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
One of the best that i've seen.
Thanks indian guy from YT ⭐
thanks anna
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
thanks bro, that is really fantastic and practical
THANKS A LOT!!!
this is what I have been looking for and found
happiness and good to you
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?
stroke dasharray should be 439.8 = 2*70*3.14
472 is wrong
graet course thanks alot
it really helped me
Hello best teacher
I'm using this short but amazing js projects for practicing and i share your channel under my projects for thanking you🙏🏽🙏🏽🙏🏽🙏🏽🙏🏽🙏🏽🌹🌹🌹🌹🌹
I just watched the entire video and admired your work , you truly are professional ! Thank you !
It's very useful for my website
Just another incredible masterpiece!🔥
what microphone you are using your voice very clear
wow this is really awesome nice one sir I do really appreciate for sharing this one
really clean and functional
plzz make more on JavaScript plz
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?
This guy is just a genius, I personally call him the Messi of programming (web development). Just aspiring to be like u one day
The final result was beautiful !!! tysm!!1
This is what i lookinf for
Super content and brillent explantion. Thx💫👍
Awesome course, thankyou
tarifga til ojis
💯
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.
Taught like magic...🤩
Professionnel 🔥
great tutorial as usual ;) Thank you so much ❤
Cool
Hoping to see more videos involving Javascript
Pls make a bootstrap website video ... pls 🙏🙏🙏🙏...
Facebook ,twitter ,insta using bootstrap classes ... pls ...waiting...💓
You did a wonderful job man great work
nice tutorials....please, make a video on news portal website
yes please do so
so if i want to start from 90 deg how can i do that ?
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.
thanks sir for this video.
Thank you so much keep it up!
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;
Very helpfull video..
This video is awesome. Sir, I've a request, please make a video on SVG and CANVAS in html.
When ever I see a tutorial from easy tutorial I give up.
wow awsome design
Thank you! It was very interesting for me. How we can to do this animation whith hover?
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.
Nice video and presentation
This was awesome and super interesting! Thank you very much.
Make full video on zomato page.Please sir
Bro i really thanks to you 🤗❤️
Love u so much Sir
U r great sir
Sir please make full course on java script with beginner level to high level please sir
Спасибо большое урок был невероятно полезен
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
Thanks again helpfull
Thanks for video
How can i change circle gradient color to green colour ?
Can you make a video showing in the same way the real % of the uploaded file/page?
Thank you!
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.
Thank you!!!
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.
Impressed boss
best toturial
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.
Thank you sir
Amazing 🥰🥰☺️
Thanks Amit, Glad you like this progress bar design tutorial
@@GreatStackDev welcome 😊sir ,Tnx for your response
Good job..
Awesome!!!
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.
Nice, please make udemy clone. Please
#respect
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 ?
Osm bro 👍🏻
Where we have to modify In code so that running percentage of individual skils got changes in % .if I want to add more Skills like- HTML, CSS ,JAVA ..
nice work
thank you
Good job bro
Give us Bootstrap Website Video..
Bro Make a Website like Dream11
if i wanted to use an outside value. say like a voltage level from a arduino. what value would i use to read the serial data ?.
very good
thanks alot
Can you please make a video about how to add preloader in wix.
Can you make a lesson about fibonacci number using java script ? .. for the example, there are two numbers, that are inputted number one and nunber two .. then you click the button .. so that between the two numbers entered earlier a number appears fibonacci in question
Achei inviável pra um projeto qualquer. Muito código.
drive.google.com/file/d/1e3cvVNJA1hpKOtS8ADS55fZua6JM3QKr/view?usp=sharing
@@ashutoshpotdar7411 Thank u SO MUCH! ⭐
thanks
super😃😃😃😃😃😃😃
how to increase the size of the stroke if I want to increase the size of this circular progress bar?
please share us full javascript course........
In line 35 what is the purpose of putting many things in box shadow that 5 lines
Can you set the circle gradient color for me when I raise the width and height of both outer div and skill div fro 160px to 300px..