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

Подписаться 1 млн

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

50% 1

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.com/file/d/1axml...
❤️ 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
👉 easytutorialspro.com/go/course/
-------------------------------------
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)
👉 easytutorialspro.com/hosting/
My recommended tools and tutorials
👉 easytutorialspro.com/
-------------------------------------
◼️ 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:
◼️ RU-vid: goo.gl/tTFmPb
◼️ Facebook: goo.gl/qv7tEQ
◼️ Twitter: / itsavinashkr
◼️ Instagram: / iamavinashkr

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

8 авг 2021

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

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

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

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

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

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

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

perfect

@Hosain_Ahmed Год назад

Exactly.

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

Your doing great bro, those are helpful in learning.

@yukii-flora Год назад

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

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

Just another incredible masterpiece!🔥

@ahlambeyoud1709 Год назад

great tutorial as usual ;) Thank you so much ❤

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

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

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

Taught like magic...🤩

@8koi245 2 года назад

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

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

Nice video, thanks. From Mozambique.

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

every time we see something new❤

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

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.

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

Super content and brillent explantion. Thx💫👍

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

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

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

You are welcome!

@MichaelShingo 10 месяцев назад

really clean and functional

@DUNIACARA Год назад

Awesome course, thankyou

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

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

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

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

@julienanryborres9496 Год назад

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

@jhosstinvargas5646 8 месяцев назад

thanks bro, that is really fantastic and practical

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

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

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

You did a wonderful job man great work

@user-mi6qb4pi3p 2 года назад

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

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

It's very useful for my website

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

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

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

Thank you so much brother

@aminebouzaid5971 Год назад

Professionnel 🔥

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

Thank you so much keep it up!

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

Bro i really thanks to you 🤗❤️

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

Very helpfull video..

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

Nice video and presentation

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

Hoping to see more videos involving Javascript

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

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.

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

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 2 года назад

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

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

@user-zu1my3cz1s 2 года назад

Thank you!!!

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

wow awsome design

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

Awesome!!!

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

Thanks again helpfull

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

This is what i lookinf for

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

thanks sir for this video.

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

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

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

U r great sir

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

thanks anna

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

Impressed boss

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

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

@softwarevision7883 Год назад

Love u so much Sir

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

Thanks for video

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

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.

@VishalSingh-cw9jj 2 года назад

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 2 года назад

You need to use js library fro that just like this ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-_8bJL55lBwA.html

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

Good job..

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

Thank you sir

@MuhmmdrizoXolmamatov Год назад

tarifga til ojis 💯

@user-sp2iu5bb3p Год назад

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

@aymansam8614 8 месяцев назад

nice work

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

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

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

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.

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

Osm bro 👍🏻

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

Good job bro

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

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

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

thank you

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

best toturial

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

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

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

thanks alot

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

very good

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

Cool

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

what microphone you are using your voice very clear

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

plzz make more on JavaScript plz

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

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

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

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

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

thanks

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

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

Almost awesome

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

Achei inviável pra um projeto qualquer. Muito código.

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

drive.google.com/file/d/1e3cvVNJA1hpKOtS8ADS55fZua6JM3QKr/view?usp=sharing

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

@@ashutoshpotdar7411 Thank u SO MUCH! ⭐

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

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

Make full video on zomato page.Please sir

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

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

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

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 9 месяцев назад

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

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

nice

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

super😃😃😃😃😃😃😃

@TechKnowledgewithAmit Год назад

Amazing 🥰🥰☺️

@GreatStackDev Год назад

Thanks Amit, Glad you like this progress bar design tutorial

@TechKnowledgewithAmit Год назад

@@GreatStackDev welcome 😊sir ,Tnx for your response

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

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

@rcvlogs16 Год назад

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

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

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

Which color theme you are using bro?

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

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

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

how to increase the size of the stroke if I want to increase the size of this circular progress bar?

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

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

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

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

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

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

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

yes please do so

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

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

@Kiran-lr8gi 4 месяца назад

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

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

#respect

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

If code will be there in drive like svg it will more helpfull

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

Give us Bootstrap Website Video..

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

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

@hellohell143 Год назад

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

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

Please add one thing that is when I will scroll down in my targeted section then it will be load I mean when you are doing refresh then it is loading. how to do this using JavaScript? Please do this.

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

In line 35 what is the purpose of putting many things in box shadow that 5 lines

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

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

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

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