Create a Circular progress bar using HTML, CSS and JS.

I am going to give you a easy way to create a circular progress bar using html, css and javascript.

HTML:
Create two div, with .outer and .inner class name.

<div class="outer">
    <div class="inner">0%</div>
</div>

CSS:
I am using flex box to center the inner div and content of div.
1- for .outer div

.outer{
    width: 100px;
    height: 100px;
    margin: 10px auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: conic-gradient(red 180deg, rgb(255, 255, 255) 0deg);
    box-shadow: -5px -3px 14px 1px #000000, 0px 1px 14px 0px #ffffff;
}

2- For .inner div

.inner{
    width: 80px;
    height: 80px;
    background-color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: inset 0px 0px 4px 0px black;
    font-weight: bolder;
    font-size: 1rem;

}

Note:
I am using background as conic-gradient for OUTER div to make progress bar and INNER div will have same background as root background to blend in.
background: conic-gradient(red 180deg, rgb(255, 255, 255) 0deg);

Once done you will get this result as we have given 180deg.

Now we want to make it dynamic.
So to make it dynamic or to add animation feel we will use below javascript code.

I have added comments to know the definition of each line.

//get the refrence of div in js using query selector for both inner and outer div
const progressbar= document.querySelector(".outer");
const innerbar= document.querySelector(".inner");

//make initial value as 0
var currentdeg=0;

//define a interval which will run with the interval of 15 milisecond [increase or decrease the value of
//timer as slow or fast you what your progress bar to be]
const myInterval= setInterval(()=>{
    //increment degree with the value of 1 each time function is called
    currentdeg=currentdeg+1;

    //convert the degree to the percentage so that you can update value in html
    var deg= (currentdeg/360)*100;

    //increment the degree value
    progressbar.style=`background:conic-gradient(red ${currentdeg}deg, rgb(255, 255, 255) 0deg);`;

    //update the inner div value as percentage
    innerbar.innerHTML=`${Math.floor(deg)}%`;

    //stop or clear interval at particular value here i am using 60 % as max value
    //after which our interval will stop
    if(deg>60)
    {
        clearInterval(myInterval);
    }
    },
15);

Thank you.
Please feel free if you have any queries.