How To Make Circular Progress Bar Using HTML CSS JavaScript | Neomorphism Progress Bar

[@imonraj]

In setInterval interval will be 2000ms/65 = 30.77ms perfect calculation

[@GreatStackDev]

perfect

[@Hosain_Ahmed]

Exactly.

[@abhaymaitra7032]

why you take 2000ms at first place, can you explain?

[@siddharthsharma1818]

Bro u r just awesome u r my ideal love u♥️♥️

[@GreatStackDev]

Thank you so much brother

[@hackytech7494]

Thanks a lot for you explanation, their are many other tutorials for same output on KZbin but they have background music and just speed coding, yours was fantastically explained.

[@GreatStackDev]

You are welcome!

[@bilal5488]

every time we see something new❤

[@knowledgecheck941]

Your doing great bro, those are helpful in learning.

[@arindamnaskar1605]

This tutorial is very useful and great. With your voice instructions and code together made this tutorial great 🔥❤️

[@VishalSingh-cw9jj]

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.

[@hassnainamjad4069]

You need to use js library fro that just like this kzbin.info/www/bejne/lWnFe39ratF1raM

[@fullgames926]

One of the best that i've seen. Thanks indian guy from YT ⭐

[@christophermawela3318]

Good, and thanks. Will probably ask more questions in future...

[@laerciomassapa7118]

Nice video, thanks. From Mozambique.

[@architech5940]

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.

[@MuhmmdrizoXolmamatov]

tarifga til ojis 💯

[@adamridwanf3986]

Just another incredible masterpiece!🔥

[@jhosstinvargas5646]

thanks bro, that is really fantastic and practical

[@ivanlattyn4314]

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

[@yukii-flora]

THANKS A LOT!!! this is what I have been looking for and found happiness and good to you

[@MichaelShingo]

really clean and functional

[@abdelhadibadji7768]

stroke dasharray should be 439.8 = 2*70*3.14 472 is wrong graet course thanks alot it really helped me

[@julienanryborres9496]

wow this is really awesome nice one sir I do really appreciate for sharing this one

[@dpbro7294]

It's very useful for my website

[@raveendrareddy4872]

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.

[@akhiljayasree1282]

Thank you so much brother.

[@GreatStackDev]

You're welcome! 😊

[@goldenmystries3692]

thanks anna

[@DUNIACARA]

Awesome course, thankyou

[@8koi245]

The final result was beautiful !!! tysm!!1

[@suvayankarmakar1806]

Taught like magic...🤩

[@vinaybharatdw4j]

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.

[@JEsterCW]

xD

[@Zsh3107]

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🙏🏽🙏🏽🙏🏽🙏🏽🙏🏽🙏🏽🌹🌹🌹🌹🌹

[@Akashgirii]

This is what i lookinf for

[@amirceljo3967]

I just watched the entire video and admired your work , you truly are professional ! Thank you !

[@aminebouzaid5971]

Professionnel 🔥

[@azaalnaimi6536]

Super content and brillent explantion. Thx💫👍

[@ibnabdulsalam4848]

Hoping to see more videos involving Javascript

[@ahlambeyoud1709]

great tutorial as usual ;) Thank you so much ❤

[@softwarevision7883]

Love u so much Sir

[@mdhossen7082]

wow awsome design

[@bilal5488]

plzz make more on JavaScript plz

[@prashantdhoke7481]

Very helpfull video..

[@TechKnowledgewithAmit]

Amazing 🥰🥰☺️

[@GreatStackDev]

Thanks Amit, Glad you like this progress bar design tutorial

[@TechKnowledgewithAmit]

@@GreatStackDev welcome 😊sir ,Tnx for your response

[@burgasHoH]

Nice video and presentation

[@imsikkusankiofficial]

thanks sir for this video.

[@rajrana5861]

what microphone you are using your voice very clear

[@hakidscartoonworld1479]

U r great sir

[@abubakariabdulrahim1624]

nice tutorials....please, make a video on news portal website

[@HriCode]

yes please do so

[@baxi3838_SG]

hi, great tutorial. question, how 18:45 can i make a dynamic number here? i want 65% to be a variable, pls help

[@Wake_up_to_reality_143]

Use formula in 11:23 Stroke-dashoffset:calc(472-(472*var(--number))/100;

[@comedyx2256]

When ever I see a tutorial from easy tutorial I give up.

[@mouctechy]

Thank you so much keep it up!

[@time4062]

Thanks again helpfull

[@webdevelopermosharraf]

Thanks for video

[@masterofnoob4621]

Pls make a bootstrap website video ... pls 🙏🙏🙏🙏... Facebook ,twitter ,insta using bootstrap classes ... pls ...waiting...💓

[@time4062]

Bro i really thanks to you 🤗❤️

[@mdashikurrahman9942]

Good job..

[@yorkchen5625]

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.

[@patricioaguirre10]

@Future Chib 70 is the radius of the circle

[@ChessPuzzlesVideo]

circumference of inner or outer circle ? Also how to calculate that 472 dasharray?

[@web_masud]

Impressed boss

[@aymansam8614]

nice work

[@manipalsinghsidhu2380]

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.

[@waleedaziz302]

You did a wonderful job man great work

[@techwithotabek]

Good job bro

[@shraddhadeshmukh5810]

Osm bro 👍🏻

[@arnabkarmakar9292]

This video is awesome. Sir, I've a request, please make a video on SVG and CANVAS in html.

[@queenmq4294]

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

[@vasanthravi7038]

Have you created multiple progress bars with different percentages? If you created means please tell me how to create it?

[@따봉냥이-o1u]

Thank you!!!

[@sumayeablash952]

Thank you sir

[@lev_bul]

super😃😃😃😃😃😃😃

[@datamis2580]

best toturial

[@HarshaMadushan]

good post, must share the source code on these type of guides

[@GreatStackDev]

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

[@HarshaMadushan]

@@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.

[@Vincentvisuals]

Awesome!!!

[@sriniwaskumar8957]

Make full video on zomato page.Please sir

[@АлександрАндреевич-в3э]

Thank you! It was very interesting for me. How we can to do this animation whith hover?

[@ibnabdulsalam4848]

This guy is just a genius, I personally call him the Messi of programming (web development). Just aspiring to be like u one day

[@DerGnoekianer]

This was awesome and super interesting! Thank you very much.

[@musicvideo1566]

very good

[@mohammodfatinnur1140]

Cool

[@anushkadhasmana857]

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.

[@oneeritrea]

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.

[@ПавелЩетько-ы4й]

Спасибо большое урок был невероятно полезен

[@nitishpatel4434]

Sir please make full course on java script with beginner level to high level please sir

[@SUYEON-k5b]

12:52 'anim' animation is not playing.. plz hep me..

[@richloveasmah3503]

Nice, please make udemy clone. Please

[@khabyfc3135]

thank you

[@idealbacaj8946]

Can you make a video showing in the same way the real % of the uploaded file/page? Thank you!

[@mamadmehdiazizi9401]

thanks alot

[@rverm1000]

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 ?.

[@moaarmy8253]

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

[@fleckenfurz77]

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..

[@jaimeperry7326]

Bump ! how do you make the keyframes value dynamic ?

[@fleckenfurz77]

@@jaimeperry7326 In the end i created sth similar with javascript canvas to achieve this animation with dynamic percentages.

[@HUSAMSALEH]

so if i want to start from 90 deg how can i do that ?

[@kavinamaranayake]

Give us Bootstrap Website Video..

[@rcvlogs16]

Can you please make a video about how to add preloader in wix.

[@daimrashid4714]

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

[@koreanil1980]

please share us full javascript course........

[@tinaberry1355]

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.

[@mdborhan2690]

nice

[@spsujoypaul9268]

Almost awesome

[@abhishek7056]

Which color theme you are using bro?

[@AnimeAddict674]

Bro Make a Website like Dream11

[@abdulsaboor5815]

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..

[@hmm2448]

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 ?

[@raviranjan8805]

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 ..

[@mutiaraichsan5061]

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

[@sumedhmohod2564]

Brother can we make this dynamic with data coming from server if can also make video for this.