Jquery 如何在我的项目中实现进度条？

我看了太多关于进度条的例子，弄糊涂了

在我的项目中，我有一个excel.png图标，单击该图标会运行一个将表数据导出到excel的页面

正如您所了解的，编译和导出数据可能需要30秒以上的时间。这足够让用户开始单击其他项目，因为没有任何迹象表明正在发生任何事情

解决方案当然是一个进度指标，有很多例子说明了如何构建进度指标。然而，我看不出该指标如何在我的项目中使用，我的困难在于将代码放在何处以及它看起来是什么样子

将数据导出到excel的我的页面称为GenSRPFLens.cshtml：

 @{    
      Layout = null;    

      var appData = Server.MapPath("~/App_Data");    
      var originalFileName = "orgSRPLens.xls";    
      var newFileName = string.Format("{0}.xls", Guid.NewGuid().ToString());    
      var originalFile = Path.Combine(appData, originalFileName);    
      var newFile = Path.Combine(appData, newFileName);    
      File.Copy(originalFile, newFile);

      var lenscat =Database.Open("A-LensCatFE-01SQL");
      var CustomerCode = !UrlData[0].IsEmpty()?UrlData[0]:"1";

      var sql = "Select * from dbo.qryDiscountLensPrice WHERE CustomerCode=@0 Order by LensForm, LensCode";
      var srplensdata = lenscat.Query(sql, CustomerCode);

      var connString = string.Format(@"Provider=Microsoft.Jet.OleDb.4.0; Data Source={0}/{1};Extended Properties='Excel 8.0;HDR=Yes;'", appData, newFileName);    
      var provider = "System.Data.OleDb";    
      using (var SRPLens = Database.OpenConnectionString(connString, provider)){
          sql = @"INSERT INTO [Sheet1$] (CustomerCode,  LensCode, LensForm, ShortName, Description, [Index], Discount, LensMultFactor, DispensingFee, VAT, VATRate, SRPBasedOn, iScription, Cost, DiscountPrice, NoVATprice, AddVAT, SRP)           
                VALUES (@0,@1,@2,@3,@4,@5,@6,@7,@8,@9,@10,@11,@12,@13,@14,@15,@16,@17)";

    foreach(var LensCode in srplensdata){            
       SRPLens.Execute(sql, 
       LensCode.CustomerCode,                
       LensCode.LensCode,                
       LensCode.LensForm,                 
       LensCode.ShortName,                 
       LensCode.Description,                 
       LensCode.Index,  
       LensCode.Discount,
       LensCode.LensMultFactor,
       LensCode.DispensingFee,
       LensCode.VAT,
       LensCode.VATRate,
       LensCode.SRPBasedOn,    
       LensCode.iScription,           
       LensCode.Cost,                 
       LensCode.DiscountPrice,
       LensCode.NoVATPrice,
       LensCode.AddVAT,
       LensCode.SRP);        
        }    
        }    
        Response.AddHeader("Content-disposition", "attachment; filename=SRPFLens.xls");    
        Response.ContentType = "application/octet-stream";    
        Response.TransmitFile(newFile);    
        Response.Flush();    
        File.Delete(newFile);    
        Response.End();


}

调用上述页面的部分位于名为DiscountCustomers.cshtml的页面中：

<img src="/images/ExcelIconGreen25x25.png" id="SRPLens" alt="Export SRP Lens" title="Export SRP F Data to Excel: Lens" />

@section script{   
<script type="text/javascript">
        $(function () {
        $('#SRPLens').live('hover', function () {
            $(this).css('cursor', 'pointer');
        });
        $('#SRPLens').live('click', function ()  {
            $('<iframe src=@linkSRPFLens></iframe>').appendTo('body').hide();        
        });
    });
</script>

}

然后我陷入了困境，有太多的例子，我无法理解代码应该是什么，应该放在哪里才能让它工作。需要您的指导，谢谢

<div id="progressBar"> <div>

js:

功能进度（百分比，$el）{
var progressBarWidth=percent*$el.width（）/100；
$el.find（'div'）.animate（{width:progressBarWidth}，500）.html（百分比+“%”）；
}
var-globalP=0；
var startProgressBar=函数（）{
如果（全球alp<100）{
globalP=globalP+1；
进度（globalP，$）；
设置超时（startProgressBar，500）；
}
否则{
//完成
}
}
$（文档）.ready（函数（）{
startProgressBar（）；
})

完整的要点：

---

感谢您的回复，我的问题是各种元素的去向以及在我的项目中如何称呼它们。例如，我把div放在哪里，你的js放在一个名为progress.js的页面中，还是直接放在一个页面中，哪个页面？您提供的链接是我正在查看的链接，但我可以获取该条，但单击图标时无法加载该条。。。在这方面的进一步帮助将非常酷…@Munatasim，再次感谢您的宝贵帮助。然而，我认为我需要的比我想象的要复杂一些。我想向用户指出，数据库功能正在运行并正在编译数据，这些数据将作为excel检索，然后用户可以打开、保存或取消。正是在这种情况发生时，我需要弹出进度条，从左到右从0%进展到100%，在数据库功能完成时退出。因此，您提供的示例可能不适合我的需要。你觉得呢？你能预测完成这项工作需要多少时间吗？如果是，则可以实现该功能。将div放在要显示进度条的位置。您可以使用css控制进度条的位置。现在Js：将Js（document.ready块除外）放在页面中的任何位置。现在，当您的上传开始时，调用

startProgressBar（）。为了获得更大的灵活性，您可以设置ajax请求以获取上传过程的状态，如果上传完成，请设置全局变量
globalP=100
。进度条将显示100%，并将停止。希望有帮助，谢谢：）完成后你必须隐藏进度条。这是更新后的代码。请注意else街区。它使用
$（'#progressBar'）.hide（）删除进度条
var startProgressBar=function（）{if（globalP<100）{globalP=globalP+1；progress（globalP，$（'#progressBar'））；setTimeout（startProgressBar，500）；}否则{$（'#progressBar'）。hide（）}
<div id="progressBar"> <div>

#progressBar {
    width: 400px;
    height: 22px;
    border: 1px solid #111;
    background-color: #292929;
}



#progressBar div {
        height: 100%;
        color: #fff;
        text-align: right;
        line-height: 22px; /* same as #progressBar height if we want text middle aligned */
        width: 0;
        background-color: #0099ff;
}

  function progress(percent, $el) {
            var progressBarWidth = percent * $el.width() / 100;
            $el.find('div').animate({ width: progressBarWidth }, 500).html(percent + "%&nbsp;");
        }

  var globalP = 0;

        var startProgressBar = function(){
            if(globalP < 100){
                globalP = globalP + 1;
                progress(globalP, $('#progressBar')); 
                setTimeout(startProgressBar, 500); 
            }
            else {
                //done
            }
        }

        $(document).ready(function(){
            startProgressBar();
        })