Loading image transparent in progressbar

Question

Hi. I am trying to show the loading image when a button is clicked. The loading works, but the form controls behind are not shown. I want to have the progress bar image as transparent, by which user can still see the controls. I have used the below code, but not working.

<form id="form1" runat="server">  
        <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">  
        </asp:ScriptManager>  
         <script type="text/javascript">  
           
             var prm = Sys.WebForms.PageRequestManager.getInstance();  
             // Add initializeRequest and endRequest  
             prm.add_initializeRequest(prm_InitializeRequest);  
             prm.add_endRequest(prm_EndRequest);  
              
             // Called when async postback begins  
             function prm_InitializeRequest(sender, args) {  
                 // get the divImage and set it to visible  
                 var panelProg = $get('divImage');                  
                 panelProg.style.display = '';  
                 
   
                 // Disable button that caused a postback  
                 $get(args._postBackElement.id).disabled = true;  
             }  
   
             // Called when async postback ends  
             function prm_EndRequest(sender, args) {  
                 // get the divImage and hide it again  
                 var panelProg = $get('divImage');                  
                 panelProg.style.display = 'none';  
   
                 // Enable button that caused a postback  
                 $get(sender._postBackSettings.sourceElement.id).disabled = false;  
             }  
         </script>  
        <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">  
<ProgressTemplate>  
      <div id="divImage" style="display:none">  
        <div class="center">  
            <img alt="" src="/images/Loading_2.gif"  />  
        </div>  
    </div>  
</ProgressTemplate>  
</asp:UpdateProgress>  
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">  
            <ContentTemplate>  
  
// in css class  
.center img {  
        height: 128px;  
        width: 128px;  
        background-color: transparent;  
        opacity: 0.5;  
        filter: alpha(opacity=50);  
    }  

Answer 1

Hi @venkatesh padmanabhan ,

Based on the code you provided, I didn't find the button you mentioned so that I cannot reproduce your issue. Does the form control behind you mentioned in your question refer to the UpdatePanel control, or something else? If possible, could you provide more details? For example, describe your requirement more clearly, or more sample code so we can reproduce your problem.

And based on your description, I created a simple demo to implement a similar function based on the code in the official document and made some modifications, just refer to these code below:

In button click event, I put the thread to sleep for 3 seconds to simulate loading, and result like this:

As you can see, I implemented it mostly via CSS: position:absolute. And the control will automatically hide the progress bar after loading, so you don't need to manually show and hide it. But if I misunderstood anything, just let me know.

Best regards,
Xudong Peng

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.