CSS
body{
margin-top:50px;
overflow:hidden;
background:black;
padding-left:100px;
padding-right:100px;
}
.bar{
overflow:hidden;
width:100%;
background:#ddd;
border-radius:50px;
animation: progress 10s linear;
}
h2{
color:#fff;
text-align:center;
background:#71b52b;
}
.left_ball{
width:50px;
height:50px;
background:#fff;
border-radius:100px;
border-top: 5px solid #123;
border-right:5px solid red;
border-bottom:5px solid #123;
border-left:5px solid red;
animation: ball 11s linear;
}
@-webkit-keyframes ball{
0%{
margin-left:0;
}
100%{
margin-left:90%;
border-left:900px solid #71b52b;
}
}
.percent{
font-size:100px;
color:#123;
text-shadow:0px 2px 20px #fff;
text-align:center;
animation: percentage 11s ease-in;
}
@-webkit-keyframes percentage{
0%{
color:#123;
}
100%{
color:#71b52b;
text-shadow: 0px 2px 50px #fff;
}
}
JAVASCRIPT
var percent = 1;
$(document).ready(function(){
$('body').append('<div class="bar"><div class="left_ball"></div></div><h1 class="percent"></h1>')
function loaderPercent(){
setTimeout(function(){
$('.percent').html(percent++ + " %");
if(percent < 101){
loaderPercent();
if(percent == 100){
$('.bar').html('<h2>LOADING COMPLETE</h2>');
$('.percent').css({'color':'#71b52b','text-shadow':'0px 0px 0px #000'});
}
}
},110);
}
loaderPercent();
});
