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
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
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 !
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!
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.
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 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
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?
...VScode??
how can this be hooked up to be functional? do i have to change the stroke-dashoffset everytime i want to fill it up?
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".
which font are you using
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
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!
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.
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
Please change your font to some something easier to read.
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!
É o Silvio Santos falando?
thanks alot for this
I'm glad you liked it!
Happy coding my friend.
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!
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?
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.
It would be great if you could provide the code for copy-pasting. Otherwise, thank you very much for the video!
In the description
Great video, but bro, why are you using all these Call of Duty sound effects for a CSS instructional video?
bro where is svg file
Hello Dev, how are you doing?
You can find it on my FB page
Happy Coding.
*_nice ... progress bar ... see later ..._*
I'm glad you like it Syed.
Happy Coding my Friend.
are u brazilian?
I am from Portugal!
Happy Coding my friend.
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!
the number of promotions of your portal is ridiculous 👿
Thanks for your feedback, my friend...
Happy Coding
thank u 👍..
Welcome 😊
I am glad you liked it.
Happy Coding my Friend.
thx
Hello Web Warrior, I am glad you liked it!
Happy Coding my friend!
That background noise is awful, please don't do it.
... Your intrusive graphics are annoying.
I'll talk to my editor, thanks for the feedback!
Happy Coding my friend"