<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();
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.