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

<div class="outer">

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

</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;

}

.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;



}

//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);