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
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
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!
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
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 !
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.
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.
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.
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
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
Very helpful, thank you very much.
i would have subbed if u gave source code
@@mraloush8959 the source code is in the video...
For those who are wondering, the stroke-dasharray should be the circumference of the circle, or the length of the path.
I'm looking for this long time and i finally get it 😍🤩
I am glad you liked it...
Happy Coding my friend!
Nice video - can I know what is the editor that you are using?
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.
Overall, you should avoid music when explaining or let it play very quietly.
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".
Great video, but bro, why are you using all these Call of Duty sound effects for a CSS instructional video?
which font are you using
It seems like Silvio Santos is narrating this video... LOL
Great tutorial!!
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!
how to add content on the right.? for example you are creating a timeline type instead. from 2010 up to 2024.
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
Yes you can!
Simple, transform roate -90deg
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 !
Yes, absolutely
@@DevMadeEasy Hello, do you have a tips to do that please ? Thanks you !
Maybe rotate() no ?
Hi! Your svg circle must looks like this
how can this be hooked up to be functional? do i have to change the stroke-dashoffset everytime i want to fill it up?
thanks alot for this
I'm glad you liked it!
Happy coding my friend.
Great job! Could you tell me what is your Visual Code Thene?Thanks!
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.
It would be great if you could provide the code for copy-pasting. Otherwise, thank you very much for the video!
In the description
Please change your font to some something easier to read.
where is the link to the code? I can't find it in the description...
Hello dev, how are you doing?
It is in my FB page.
Happy Coding!
Nice bar, but dawn sound and video effects. Are you making this video for children?
Thanks for you feedback, I am a coder, but still learning how to edit video...
I am gonna hire a video editor.
Happy Coding my friend!
hey hi, number.innerHTML = '${counter}%'; doesn't work as intended. It behaves like a string. Anyone know why?
Hello Web Warrior, are you using `` ?
'${counter}%' ❌
`${counter}%`✅
Happy Coding. my friend!
*_nice ... progress bar ... see later ..._*
I'm glad you like it Syed.
Happy Coding my Friend.
How did you change the font of css classes?
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.
@@DevMadeEasy nah im talking about your ide your classes are written in handwriting font
Hi How can you make this progress bar responsive? Thanks
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.
bro where is svg file
Hello Dev, how are you doing?
You can find it on my FB page
Happy Coding.
the number of promotions of your portal is ridiculous 👿
Thanks for your feedback, my friend...
Happy Coding
dislike for not sharing svg code and bad font
Oh, I am sorry, but it is in my FB page.
same
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.
@@DevMadeEasy where on your FB page?
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;
}
}
"
did you ever get this problem figured out?
are u brazilian?
I am from Portugal!
Happy Coding my friend.
thank u 👍..
Welcome 😊
I am glad you liked it.
Happy Coding my Friend.
That background noise is awful, please don't do it.
thx
Hello Web Warrior, I am glad you liked it!
Happy Coding my friend!
... Your intrusive graphics are annoying.
I'll talk to my editor, thanks for the feedback!
Happy Coding my friend"