带进度条的Javascript下载文件

Question

接受条款和条件后，我有一个简单的文件下载。但想稍微调整一下： 1.在按钮之前将文件名作为内联，所以我们有斜角然后是空格，然后按钮没有换行 2.添加进度条进行下载

我的代码：

  <form name="form1" method="post" action="">
  <div class="download">
  <input type="checkbox" name="download" id="download">
  <label for="download">I Agree to Terms and Conditions</label>
  <br>
  <div class="terms">Bevelback 
  <a href="/linkToFiles1.zip">Download</a> 
  <span class="must-select">You must accept the Terms and Conditions 
by clicking the checkbox</span> </div>
  <div class="terms"> 
  <a href="/linkToFiles2.zip">Download</a> 
    <span class="must-select">You must accept the Terms and Conditions 
by clicking the checkbox</span> </div>
     <div class="terms"> 
    <a href="/linkToFiles3.zip">Download</a> 
    <span class="must-select">You must accept the Terms and Conditions 
by clicking the checkbox</span> </div>
     <div class="terms"> 
    <a href="/linkToFiles4.zip">Download</a> 
    <span class="must-select">You must accept the Terms and Conditions 
by clicking the checkbox</span> </div>
  </div>
 </form>

我的CSS：

<style>
.terms a, .must-select {
position:absolute;
left:-999em;
transition:opacity 1s ease;
background:darkred;
color:#fff;
opacity:0;
}
.terms a {
color:#444;
background:transparent;
}
.terms:after {
content:"Files";
display:block;
color:#999;
text-decoration:none;
border: thin solid #ccc;
border-radius: 4px;
width: 100px;
padding: 4px 14px;
}
.terms{
padding:10px 0 0;
position:relative;  
}
.terms:hover .must-select{
display:block;
position:absolute;
bottom:-3em;
left:auto;
opacity:1.0;
padding:.3em;
border-radius:4px;
z-index:99;
}
#download:checked ~ .terms .must-select{display:none}
#download:checked ~ .terms a{position:static;opacity:1.0;}
#download:checked ~ .terms:after{display:none}
</style> 

有什么想法吗？我认为jquery是最简单的方法，但无法弄清楚如何将它们链接在一起。