Индикатор выполнения JQuery, показывающий, что что-то происходит на странице

Question

У меня есть страница отчета в моем приложении, и нет указания, что отчет запускается при нажатии кнопки. Поэтому я хочу добавить некоторый индикатор, похожий на старый курсор мыши в Access. Но я решил попробовать использовать JQuery Progress Bar.

Я пошел на официальную страницу JQuery Progress Bar и нашел код для интеграции в мой проект. То, что я это на странице ASPX:

В заголовке:

<!--//********************************** 
    // Test Indeterminate Progress Bar 
    //********************************** --> 
<script type="text/javascript"> 
    //Total out of range dialog 
    $(function() { 
     $("#progressbar").progressbar({ 
      value: false 
     }); 
     $("button").on("click", function (event) { 
      var target = $(event.target), 
       progressbar = $("#progressbar"), 
       progressbarValue = progressbar.find(".ui-progressbar-value"); 
       progressbar.progressbar("option", "value", false); 
     }); 
    }); 

</script> 
<style> 
    #progressbar .ui-progressbar-value {  
     background-color: #ccc; } 
</style> 

В теле:

<div id="progressbar" style="visibility:hidden"></div> 

Так что теперь, что я ожидал, чтобы сделать заключается в том, чтобы сделать некоторый вызов в коде в событии OnClick кнопки, чтобы сделать индикатор выполнения видимым, а затем, когда код завершил выполнение, я снова сделаю его невидимым.

Прежде всего, это правильное предположение? И, во-вторых, как мне это сделать? Intellisense не распознает «progressbar» как объект.

Answer 1

Будучи, что прогресс бар не был на самом деле происходит, чтобы показать прогресс, я решил пойти с анимированными GIF с помощью жерех: UpdateProgress:

<asp:UpdateProgress ID="rptUpdate" runat="server" 
        AssociatedUpdatePanelID="upReports1" DynamicLayout="true"> 
    <ProgressTemplate> 
     <img src="images/Animated.gif"> 
    </ProgressTemplate> 
</asp:UpdateProgress> 

Это просто больше смысла для моей implimentation.