• HTML
• CSS
• JS

HTML

<div class="container">
    <div class="circular-progress">
        <span class="progress-value">0%</span>
    </div>
    <span class="text">HTML & CSS</span>
</div>

CSS

/* Google Fonts - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}
body{
    height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#7d2ae8;
}
.container{
    display:flex;
    width:420px;
    padding:50px 0;
    border-radius:8px;
    background:#fff;
    row-gap:30px;
    flex-direction:column;
    align-items:center;
}
.circular-progress{
    position:relative;
    height:250px;
    width:250px;
    background-color:#f0ff;
    border-radius:50%;
    background:conic-gradient(#7d2ae8 3.6deg,#ededed 0deg);
    display:flex;
    align-items:center;
    justify-content:center;
}
.circular-progress::before{
    content:"";
    position:absolute;
    height:215px;
    width:215px;
    border-radius:50%;
    background-color:#fff;
}
.progress-value{
    position:relative;
    font-size:40px;
    font-weight:600;
    color:#7d2ae8;
}

.text{
    font-size:30px;
    font-weight:500;
    color:#606060;
}

JS

let circularProgress = document.querySelector(".circular-progress"),
    progressValue = document.querySelector(".progress-value");
    
let progressStartValue = 0,
    progressEndValue = 90,
    speed = 100;
    
let progress = setInterval(() => {
    progressStartValue ++;
    
    progressValue.textContent = `${progressStartValue}%`;
    circularProgress.style.background = `conic-gradient(#7d2ae8 ${progressStartValue * 3.6}deg,#ededed 0deg)`;
    
    if(progressStartValue == progressEndValue){
        clearInterval(progress);
    }
    console.log(progressStartValue);
},speed)

/* All the credits: https://www.youtube.com/watch?v=SKU2gExpkPI */