<div class="progressbar">
<span class="progress">0</span>
</div>.progressbar{
width: 400px;
height: 15px;
border-radius: 10px;
overflow:hidden;
background: #ccc;
position:relative;
}
.progressbar::after{
content:'';
position:absolute;
top:0;
left:0;
height: 15px;
width:0;
background:blue;
animation: progress 5s ease forwards;
}
@keyframes progress{
0%{width: 0px}
100%{width: 100%;}
}
.progress{
position: absolute;
top:0;
right:0;
z-index:99;
}
.progress::after{
content: '%';
}$({ val : 0 }).animate({ val : 100 }, {
duration:5000,
step: function() {
$(".progress").text(Math.floor(this.val));
},
complete: function() {
$(".progress").text(Math.floor(this.val));
$(".progress").css("color","#fff");
}
});
External CSS
This Pen doesn't use any external CSS resources.