📇How To Make Circular Progress Bar

No video

📇How To Make Circular Progress Bar | HTML CSS JavaScript

Рет қаралды 44,737

Күн бұрын

Make a Circular Progress Bar | HTML CSS JavaScript, step-by-step from scratch.
______________________________________________________________
🌱💜Support our channel from as little as $1-3 by becoming a Patreon because by doing that, you will help our Channel and also you will have access to 🖥️ Source Code of our videos!
➤ bit.ly/3sthx5B
______________________________________________________________
📚Resources
Markup | Pics Used In This Project: bit.ly/3cp2S5W
______________________________________________________________
🏆Recommended Videos🏆
🎬Login & Registration Form Using HTML & CSS & JS✨
➤ • Login & Registration F...
🎬CSS Text Typing Animation | HTML & CSS
➤ • CSS Text Typing Animat...
🎬Countdown Timer | JavaScript✨
➤ • Countdown Timer | Java...
🎬Build A Weather App | JavaScript [Beginners]✨
➤ • 🎬Build A Weather App |...
🎬Build a Step Progress Bar | JavaScript✨
➤ • Build a Step Progress ...
______________________________________________________________
🛴 Follow me on:
👉Facebook: bit.ly/3cp2S5W
______________________________________________________________
🎵Background Music:
bensound.com
Music from Uppbeat (free for Creators!):
uppbeat.io/t/h...
License code: 56MWF5EPYAGXVXQM
uppbeat.io/t/m...
License code: FWAXXXHSTLFDZ5F8

Пікірлер: 63

@Daniellathedragoness 6 ай бұрын

For anyone who wants it to start at the top and animate clockwise, try using "transform: rotate (-90)" and then using negative numbers for the dash offset

@sarveshkilje405 5 ай бұрын

I'm looking for this long time and i finally get it 😍🤩

@DevMadeEasy 5 ай бұрын

I am glad you liked it... Happy Coding my friend!

@azanlodhi9970 3 ай бұрын

thanks alot for this

@DevMadeEasy 3 ай бұрын

I'm glad you liked it! Happy coding my friend.

@davidmeinname 2 жыл бұрын

very nice progress bar, but I would recommend using a more readable font when filming videos. And the music on 6:10 was unnecessary and way too loud.

@davidmeinname 2 жыл бұрын

Overall, you should avoid music when explaining or let it play very quietly.

@DevMadeEasy 2 жыл бұрын

Thanks for the feedback, I am a developer not a video editor, this is the part I am still learning how to "work with video and audio".

@phil9894 Ай бұрын

how to add content on the right.? for example you are creating a timeline type instead. from 2010 up to 2024.

@lucianostegun Жыл бұрын

It seems like Silvio Santos is narrating this video... LOL Great tutorial!!

@DevMadeEasy Жыл бұрын

We definitely have something in common then. When I was living in Brazil, I also worked as an Announcer for a radio station. It's such an exciting job, isn't it? Silvio Santos has a distinctive voice, and his narration style is quite recognizable. I'm glad you enjoyed the tutorial! Happy Coding my Friend!

@eduardoontiveros4579 Жыл бұрын

how can this be hooked up to be functional? do i have to change the stroke-dashoffset everytime i want to fill it up?

@arminhsz Жыл бұрын

Hello dear, thank you so much! I have a question for you! With this method the circle is filling out from the middle and how can we make it from the top? Like a clock

@DevMadeEasy Жыл бұрын

Yes you can!

@creando-algo Жыл бұрын

Simple, transform roate -90deg

@DevMadeEasy 2 жыл бұрын

If you find this video helpful, give it a like👍🏻 as this would help it reach even more people! Also, subscribe if you haven't ! Thank you! 🙏🙏 🎨 Source Code: devmadeeasy.gumroad.com/l/howtomakecircularprogressbar

@yassermounir9405 2 жыл бұрын

Very helpful, thank you very much.

@mraloush8959 Жыл бұрын

i would have subbed if u gave source code

@user-sr5bm2cv2x 3 ай бұрын

@@mraloush8959 the source code is in the video...

@abcdgamingandcreations2104 Ай бұрын

which font are you using

@feyzullahuysal9969 Жыл бұрын

hey hi, number.innerHTML = '${counter}%'; doesn't work as intended. It behaves like a string. Anyone know why?

@DevMadeEasy Жыл бұрын

Hello Web Warrior, are you using `` ? '${counter}%' ❌ `${counter}%`✅ Happy Coding. my friend!

@syediqbalahmed3176 2 жыл бұрын

*_nice ... progress bar ... see later ..._*

@DevMadeEasy 2 жыл бұрын

I'm glad you like it Syed. Happy Coding my Friend.

@rockettsword 4 ай бұрын

It would be great if you could provide the code for copy-pasting. Otherwise, thank you very much for the video!

@DevMadeEasy 4 ай бұрын

In the description

@LePaysagisteDuSubtil 8 ай бұрын

Hello, Nice circular progress bar ! I was wondering if it's possible to make that the gradient circle start from the top instead of the right ? If it is, can you tell me how to do please ? Thanks you !

@DevMadeEasy 8 ай бұрын

Yes, absolutely

@LePaysagisteDuSubtil 8 ай бұрын

@@DevMadeEasy Hello, do you have a tips to do that please ? Thanks you !

@Fawaed_salafia 7 ай бұрын

Maybe rotate() no ?

@aurilaus 4 ай бұрын

Hi! Your svg circle must looks like this

@glebbaruch6644 Жыл бұрын

dislike for not sharing svg code and bad font

@DevMadeEasy Жыл бұрын

Oh, I am sorry, but it is in my FB page.

@MarkoFPV Жыл бұрын

same

@tedreams Жыл бұрын

at first, that's what I thought but pausing the video and writing the SVG yourself makes you understand the code and how to customize it. this video deserves likes.

@RahulSingh-lo9km 6 ай бұрын

@@DevMadeEasy where on your FB page?

@appsenence9244 Жыл бұрын

where is the link to the code? I can't find it in the description...

@DevMadeEasy Жыл бұрын

Hello dev, how are you doing? It is in my FB page. Happy Coding!

@jsamusicsociety Жыл бұрын

Great job! Could you tell me what is your Visual Code Thene?Thanks!

@DevMadeEasy Жыл бұрын

Thank you! The theme I'm currently using is Monokai Pro. It's a popular color scheme for code editors, including Visual Studio Code, that features vibrant and contrasting colors, making code elements stand out and improving readability. If you're interested in trying it out, you can search for "Monokai Pro" in the Visual Studio Code extensions marketplace and install the theme for a visually pleasing coding experience.

@SteveJohnSteele 6 ай бұрын

Please change your font to some something easier to read.

@it9hektar Жыл бұрын

thank u 👍..

@DevMadeEasy Жыл бұрын

Welcome 😊 I am glad you liked it. Happy Coding my Friend.

@hernyf12 Жыл бұрын

Can you help me please. I Need edit the number "157.5" from js for make another skills. " @keyframes anim { 100%{ stroke-dashoffset: 157.5; } } "

@tornado2783 Жыл бұрын

did you ever get this problem figured out?

@maddman9171 Жыл бұрын

Hi How can you make this progress bar responsive? Thanks

@DevMadeEasy Жыл бұрын

To make it responsive, you can use CSS media queries to adjust the width of the progress bar based on the size of the viewport.

@Salamaleikum80 Жыл бұрын

How did you change the font of css classes?

@DevMadeEasy Жыл бұрын

You can use the font-family property in your CSS rule. Like that: .myClass { font-family: Arial, Helvetica, sans-serif; } This will try to use Arial first, then Helvetica, and finally the default sans-serif font if neither of those are available.

@Salamaleikum80 Жыл бұрын

@@DevMadeEasy nah im talking about your ide your classes are written in handwriting font