MrProgrammer,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
div#val {
background-color: green;
border-radius:10px;
width: 0px;
}
div#pbar {
background-color: gray;
border-radius:20px;
border: 3px solid black;
width: 100px;
}
span.pbar-text{
z-index:10;
margin: 0 auto;
text-align: center;
text-color: black;
}
</style>
<script>
window.onload=function(){
var val = +document.getElementById('pbar').getAttribute('data-binary');
var v = document.getElementById('val');
var t =document.getElementsByClassName('pbar-text')[0];
t.innerHTML=" "
var i=0;
function go(){
if(i != val){
i++;
v.style.width = i+'px';
t.innerHTML=i+'%';
window.setTimeout(go,50)
}else{
t.innerHTML = 'Загрузка завершена';
}
}
go()
}
</script>
</head>
<body>
<div id='pbar' data-binary='52'>
<div id='val'>
<span class='pbar-text'></span>
</div>
</div>
</body>
</html>
|