 |
<html>
<head>
<title>ProgressBar</title>
</head>
<style>
#bg{
position: absolute;
top:0; left:0;
width: 100%; height: 100%;
padding-top: 45%;
}
#pbg{
width:400px;
padding:5px;
border-radius:10px;
background-color: #fff;
border:solid 2px green;
}
#pb{
height:30px;
background-color: green;
text-align: center;
font-size: 18px;
font-weight: bold;
padding-top: 7px;
font-family: calibri;
color: #fff;
animation-name: pb;
animation-duration: 20s;
animation-timing-function: linear;
animation-iteration-count: 1;
}
@keyframes pb{
0%{
width: 0px;
}100%{
width: 390px;
}
}
#title{
color:#666;
font-size:16px;
font-family: Consolas;
}
</style>
<script>
window.setTimeout(function(){
document.getElementById("title").innerHTML = "Loading Completed!"
}, 20000);
var num = window.setInterval(function txt(){
var txxt = document.getElementById("percent");
txxt.innerHTML++;
}, 200);
window.setTimeout(function(){
clearTimeout(num);
}, 20000);
</script>
<body>
<div id="bg" align="center">
<div id="pbg" align="left"><div id="pb"><font id="percent"></font><font>%</font></div></div><br/>
<font id="title"><i>Please wait... </i></font>
</div>
</body>
</html>
Wow! Great! Love this.... Thanks
ReplyDelete