How to make Circular Progress Bar in HTML CSS & JavaScript | Skills Bar
HTML-код
- Опубликовано: 8 фев 2025
- How to make Circular Progress Bar in HTML CSS & JavaScript | Animated Circular Progress Bar | No SVG
In this video tutorial, you will learn to make an animated Circular Progress Bar using HTML CSS & JavaScript. To make this circular progress bar I have not used any SVG. It is made by pure HTML CSS JavaScript. You can use this project on the website to show someone skills in particular subjects.
---
Hire us on Fiverr
➤ www.fiverr.com...
Follow me on Instagram
➤ / coding.np
Visit my website for helpful coding projects with source code
➤ www.codingnepa...
#Circular_Progress_Bar #Progress_Animation #HTML_CSS_JavaScript
---
🎵 Music Credit:
Something 'bout July (Instrumental) by RYYZN
Free Download / Stream: bit.ly/-_someth...
Music promoted by Audio Library • Something 'bout July (...
Song: Ehrling - You And Me (Vlog No Copyright Music)
Music provided by Vlog No Copyright Music.
➤ Video Link: • Ehrling - You And Me (...
Watching your content makes me confident to start my own youtube channel about front end development. Thanks for your amazing content 😊
Using *conic-gradient* was definitely the easiest way to achieve this effect. Thanks for the tip!
Glad I could help!
Great video. I've been looking for a tutorial like this and finally, I've found exactly what I needed. thank you so much.
Glad it helped!
You are very smart
Great job 👍👍👍
You simplay saved my day. Thanks!
What I like most about this approach is how easy it is to write the percentage of progress. If you write progressEndValue=50, it displays as 50%!
nailed it, you really did a good job here, simple but so much useful. looking forward for more vids like this. Thankss
Awesome, friend. Love your tutorials. ✨
Thank you! Cheers!
This is great, instant sub!
thank you my friend you saved my day
Very good job. And quite simple way to implement it.
which IDE do you use for Coding??? btw your content is amazing, your content inspire me to learn more...
VS code editor.
Very good. Thanks for this video
Most welcome. Glad you liked it.
thank you it's a great viedo 😍😍😍😍😍😍
Amazing tuto bro, thanks for help !
Happy to help!
good gob continue
thanks for the video, but I wanna make the middle part transparent, how can I do that? any idea?
Thank u so much! )
You're welcome!
wow!! much thanks!
Glad it helped!
Thanks a million bro!
Glad it helped!
is there a way to make the animation smoother?
Thank you very much.
You are welcome!
nice 👍 one
Thank you! Cheers!
nice work
Thank you! Cheers!
Thank U 👍
Thanks a lot
Most welcome
Thanks😊🙏
Welcome 😊
Hello bro, we need from you to make a custom video with html css and js because you didn't make it before at your channel . Thanks 🙏 for your content .
is there any way to create this progress bar in anticlockwise direction?
How many years have you known these languages? And how old are you because you have really nice projects, I hope you get where you want to be successful :)
I've been coding 4+ years and am 23. Thankyou for you beautiful words.
@@CodingLabYT
I'm 22 years old too, I hope I can be a good coder like you because I really want it sincerely you're amazing :)
I am using this Circular Progress bar, but this circulation run when page first time load. But I need to show this circular animation when visitor reach this section. Can you get me a code for this?
thank you !!!
You're welcome
Thanks for your work! insta subscribe😀
Awesome, thank you!
Hmm, wouldn't it be easier to apply border-radius and background directly to .progress-value and easily define thickness of progress bar by applying padding to .circular-progress?
javascript code-
let circularProgress = document.querySelector(".circular-progress"),
progressValue = document.querySelector(".progress-value");
let progressStartValue = 0,
progressEndValue = 88,
speed = 50; // Adjust speed for smooth animation
let progress = setInterval(() => {
progressStartValue++;
// Update the percentage text
progressValue.textContent = `${progressStartValue}%`;
// Update the circular progress bar's background
circularProgress.style.background = `conic-gradient(#ffffff ${progressStartValue * 3.6}deg, #E6988E ${progressStartValue * 3.6}deg)`;
// Stop the animation when it reaches 88%
if (progressStartValue >= progressEndValue) {
clearInterval(progress);
}
}, speed);
Can you make a video on a dropdown that pushes down a content?
I am your fan bhai 😔
thank you becouse there are Source Codes
You're welcome
Awesome tutorial😍, but I want to know when i am making copies of that container div then the js makes only the first one run but the copied ones just do not run. any solution ? i'm a new guy
You can take source code from my website link is in description.
How do i make the progress value and circular start all over again after 100% instead of stopping at 100 ?
For eg, after 100% it will start all over from 0 to 100%
what screen recorder do you use
filmora screen recorder
I followed the code but it returns ${progressStartValue} and I dont find any errors in the console. Any suggestions?
the outline bar doesnt progress.circularProgress.style.background part doesnt work
You can take all the source code form my website, link is in the description.
Please make a custom video player
It works well but very stutters. It's better svg strokedasharry control than it.
Can u send me javascript for multiple progress bar with dynamic value please
source code ?
My website link is in the description.
Thank you very much