UnicornLord,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.progress-bar{
height: 10px;
width: 0px;
background-color: hsl(0, 100%, 40%);
}
.progress-number:after{
content: attr(aria-valuenow)"%";
margin-left: -38px;
}
#progressBar{
overflow: hidden;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(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').replaceWith("<a href='/test'>Файл готов</a>");
return;
}
timer++;
setTimeout(timerRun ,200);
}
$('#loadBtn').one('click', function(e){
e.preventDefault();
$(this).html("Архивируется...");
timerRun();
});
});
</script>
</head>
<body>
<div id="progressBar"><div class="progress-bar"></div><div class="progress-number"></div></div>
<button id="loadBtn">go</button>
</body>
</html>