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='https://google.com/test'>Файл готов</a>");
return;
}
timer++;
setTimeout(timerRun ,200);
}
$('#loadBtn').one('click', function(e){
e.preventDefault();
$(this).text("Архивируется...");
timerRun();
});
});
</script>
</head>
<body>
<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">Запаковать Архив</a>
</div>
</div>
</body>
</html>