• HTML
• CSS
• JS

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="container" id="container">
    <i class="fa-solid fa-down-long download"></i>
    <h2 id="number"></h2>
</div>

CSS

*
{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:consolas;
}
body
{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    background:#222;
}
.container
{
    position:relative;
    width:200px;
    height:200px;
    background:conic-gradient(#333 0%,#333 100%);
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:pointer;
    user-select:none;
    overflow:hidden;
}
.container.done
{
    background:#0f0 !important;
}
.container::before
{
    content:'';
    position:absolute;
    inset:15px;
    border-radius:50%;
    background:#222;
    opacity:0.9;
}
.container #number{
    position:relative;
    color:#fff;
    z-index:100;
    font-size:3em;
    text-align:center;
}
.container.done #number
{
    font-size:5em;
    line-height:1em;
}
.container #number span
{
    font-size:0.5em;
}
.container.done #number small
{
    position:absolute;
    top:10px;
    font-size:0.2em;
    text-transform:uppercase;
    white-space:nowrap;
    font-weight:500;
    letter-spacing:0.05em;
    transform:translate(-50%,50%);
}
.download
{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    color:#03a9f5;
    font-size:4em;
    transition:0.5s;
}
.download.start
{
    transform:translateY(160%);
}

JS

let download = document.querySelector('.download');
let container = document.getElementById('container');
let number = document.getElementById('number');

download.addEventListener('click',function(event){
    download.classList.add('start');
    let degree = 0;
    let interval = setInterval(function(){
        degree += 1;
        if(degree > 100){
            clearInterval(interval);
            number.innerHTML = '<i class="fa-solid fa-check"></i><br><small>100% Done</small>'
            container.classList.add('done')
            return;
        }
        container.style.background = `conic-gradient(#f5036c ${degree}%, #333 0%)`;
        number.innerHTML = degree + '<span>%</span>'
    },100)
})

/*
    All the credist to : https://www.youtube.com/watch?v=7_SvNVi_RhY
*/