<div class="chart">
    <div class="bar"></div>
    <!-- Change the value below -->
    <span id="value1">68</span>
</div>

body {
    justify-content: center;
    align-items: center;
    background: #111;
    display: flex;
    height: 100vh;
    padding: 0;
    margin: 0;
}

.chart {
    background: rgba(255, 255, 255, 0.1);
    justify-content: flex-start;
    border-radius: 100px;
    align-items: center;
    position: relative;
    padding: 0 5px;
    display: flex;
    height: 40px;
    width: 500px;
}
    .chart span {
        /* You can modify the value below to change the distance between the percentage number and the bar */
        margin-left: 5px;
        color: #fff;
        font-weight: bolder;
    }

.bar {
    /* You can modify the total time used for the animation here */
    animation: load 3s normal forwards;
    /* 
    Add a little spice by having a shadow below the bar.
    Feel free to comment out this line below to have an even LITE version :D 
    */
    box-shadow: 0 10px 40px -10px #fff;

    border-radius: 100px;
    background: #fff;
    height: 30px;
    width: 0;
} 

@keyframes load {
    0% {
        width: 0;
    }
    100% {
        /* You need to change the percentage below to match the value in the corresponding <span> */
        width: 68%;
    }
}

// Github verson (1 file .html): https://github.com/Soooda/progress_bar_lite/blob/master/index.html

function increase() {
    // Change the variable to modify the speed of the number increasing from 0 to (ms)
    let SPEED = 40;
    // Retrieve the percentage value
    let limit = parseInt(document.getElementById("value1").innerHTML, 10);

    for(let i = 0; i <= limit; i++) {
        setTimeout(function () {
            document.getElementById("value1").innerHTML = i + "%";
        }, SPEED * i);
    }
}

increase();