How to make Circular Progress Bar in HTML CSS & JavaScript | Skills Bar

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

Follow me on Instagram

Visit my website for helpful coding projects with source code

#Circular_Progress_Bar #Progress_Animation #HTML_CSS_JavaScript

---

🎵 Music Credit:
Something 'bout July (Instrumental) by RYYZN

Song: Ehrling - You And Me (Vlog No Copyright Music)
Music provided by Vlog No Copyright Music.

[telstema]

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%!

[etelier]

Using *conic-gradient* was definitely the easiest way to achieve this effect. Thanks for the tip!

[Virajsinh_Patil]

javascript code-
let circularProgress = document.querySelector(".circular-progress"),
progressValue =

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
= ${progressStartValue * 3.6}deg, #E6988E ${progressStartValue * 3.6}deg)`;

// Stop the animation when it reaches 88%
if (progressStartValue >= progressEndValue) {
clearInterval(progress);
}
}, speed);

[skabuamer]

Great video. I've been looking for a tutorial like this and finally, I've found exactly what I needed. thank you so much.

[jariyaboonchaleaw]

thank you it's a great viedo 😍😍😍😍😍😍

[tarunrawat]

is there any way to create this progress bar in anticlockwise direction?

[esaoll]

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?

[gulraizcodes]

Awesome, friend. Love your tutorials. ✨

[patatas.m]

nailed it, you really did a good job here, simple but so much useful. looking forward for more vids like this. Thankss

[Jean-ykeo]

is there a way to make the animation smoother?

[besika]

thank you my friend you saved my day <3 great tutorials ^_^

[matthijs]

I followed the code but it returns ${progressStartValue} and I dont find any errors in the console. Any suggestions?

[bryantan]

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%

[kratikkumarshakya]

which IDE do you use for Coding??? btw your content is amazing, your content inspire me to learn more...

[braveplayers]

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

[peetboy]

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?

[vFedora]

the outline bar doesnt part doesnt work

[Javicallejon]

Thanks for your work! insta subscribe😀

[funnypower]

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 .

[nurislam-]

thank you becouse there are Source Codes