• HTML
• CSS

HTML

<div></div>

CSS

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:sans-serif;
}
body{
    display:flex;
    align-items:center;
    justify-content:center;
    height:100vh;
    background-color:#1f1f1f;
}
div{
    width:480px;
    height:80px;
    background-color:#000;
    border-radius:4px;
    position:relative;
}
div::before{
    content:"";
    width:40px;
    height:90%;
    background:linear-gradient(to right,#fff,#00ff2f,#00ff2f);
    position:absolute;
    left:4px;
    top:4px;
    border-radius:2px;
    animation:move 6s ease-in-out infinite;
}
@keyframes move{
    0%{
        width:0;
    }
    100%{
        width:98%;
    }
}
div::after{
    content:"0%";
    position:absolute;
    font-weight:700;
    color:#fff;
    top:-40px;
    left:44%;
    font-size:34px;
    animation:number 6s linear infinite;
}
@keyframes number{
    0%{
        content:"0%";
    }
    10%{
        content:"10%";
    }
    20%{
        content:"20%";
    }
    30%{
        content:"30%";
    }
    40%{
        content:"40%";
    }
    50%{
        content:"50%";
    }
    60%{
        content:"60%";
    }
    70%{
        content:"70%";
    }
    80%{
        content:"80%";
    }
    90%{
        content:"90%";
    }
    100%{
        content:"100%";
    }
    
}

/* All credits to: https://www.youtube.com/watch?v=AcyPhQzAJx8 */