<!-- progress bar -->
<div class="show-container">
<div class="progress" id="progressBar">
<div class="progress-number" aria-valuenow="0" style="left: 0;"></div>
<div class="rounded">
<div class="progress-bar" style="width: 0;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
</div>
<div class="button-container">
<a href="#" id="loadBtn" class="button">Load stuff</a>
</div>
</div>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:600,400,300);
body {
font-family: 'Open Sans', sans-serif;
}
.show-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 350px;
}
.rounded {
height: 100%;
border-radius: 999px;
overflow: hidden;
transform: translateZ(0);
}
.progress-container {
position: relative;
}
.progress {
position: relative;
width: 100%;
height: 20px;
background-color: #e7edf4;
border-radius: 99px;
.progress-bar {
position: relative;
height: 100%;
background-color: #00c0fb;
transition: width .2s linear;
}
.progress-number {
position: absolute;
left: 0;
top: 0;
transition: transform .2s linear;
&:before {
content: "";
position: absolute;
top: -10px;
left: 0;
transform: translateX(-50%);
border-top: 5px solid #525961;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
&:after {
content: attr(aria-valuenow);
position: absolute;
left: 0;
top: -10px;
transform: translate(-50%,-100%);
padding: 4px 10px;
color: #fff;
font-size: 13px;
font-weight: 300;
background-color: #525961;
border-radius: 3px;
}
}
}
.button-container {
display: block;
text-align: center;
padding: 60px 0;
}
.button {
color: #1F2225;
font-weight: 400;
text-decoration: none;
border: 2px solid #525961;
padding: 10px 25px;
transition: all .15s ease-in-out;
&:hover {
background-color: #525961;
color: #fff;
}
}
View Compiled
$(document).ready(function(){
var timer=0;
var percentageWidth = $('#progressBar').outerWidth()/100;
function timerRun(){
$('#progressBar .progress-bar').css("width", timer + "%").attr("aria-valuenow", timer);
$('#progressBar .progress-number').css("-webkit-transform", "translateX(" + percentageWidth*timer + "px)").attr("aria-valuenow", timer);
if(timer >= 100){
$('#progressBar .progress-bar').css("width","100%");
$('#loadBtn').html("Done");
return;
}
timer++;
setTimeout(function(){timerRun()},200);
}
$('#loadBtn').click(function(e){
e.preventDefault();
$(this).html("loading");
timerRun();
});
});
This Pen doesn't use any external CSS resources.