Progress Bar on DropDown Selected Event

Question

I have a dropdown list in my SharePoint Webpart and upon selection of a value from the dropdown list (selectindexchanged) I am showing a aspnet treeview. The issue I face is the TreeView control takes a while to load content. I wonder if there is any jQuery that I could utilize that keeps the end user abreast that the request is in progress utilizing a progress bar etc.

I cannot use AspNet Ajax as TreeViews cannot be rendered in Ajax. Please if you can provide any jQuery code it would be great.

Below is an excerpt of my HTML that I have in my user control:

                        <td  width="70%" id="div_DCL">

                            <asp:DropDownList ID="ddl_DCL_ModifiedDate" runat="server" OnTextChanged="DCL_ModifiedDate_Changed" AutoPostBack="true">
                                <asp:ListItem Value="7" Text="Modified Within Last Week" Selected="True"></asp:ListItem>
                                <asp:ListItem Value="30" Text="Modified Within Last Month"></asp:ListItem>
                                <asp:ListItem Value="180" Text="Modified Within Last 6 Months"></asp:ListItem>
                                <asp:ListItem Value="365" Text="Modified Within Last Year"></asp:ListItem>
                                <asp:ListItem Value="3650" Text="Modified Longer Than a Year"></asp:ListItem>
                             </asp:DropDownList>
                            <br />
                                 <asp:TreeView ID="tvDocumentLibrary" runat="server"></asp:TreeView>

                    </td>

Answer 1

Since you are not using Update Panels, you are doing a full postback.

Then why not use JQuery script which binds JS code on change like below

1) Add a class to your dropdown. Like below

asp:DropDownList ID="ddl_DCL_ModifiedDate" CssClass="ddl_DCL_ModifiedDate"

2) Write code inside DOM ready in your webpart to trigger initial JS codes

$(document).ready(function () {

$(".ddl_DCL_ModifiedDate").change(function()
{

   //Here show an DIV which is hidden by default & has properties like width 100% height 100% & transparency. It can contain HTML contents also like image/test

 $("#divMaskDashboard").show();

});

});

So this is how it works

1. You attach a change handler in the DOM ready on your dropdown using CSS class name
2. This will display a image/div when the dropdown in changed while the postback is happening in the background
3. You complete postback happens & the image/div gets hidden automatically

I normally use below CSS for the DIV

#divMaskDashboard {
    /*
    opacity: 1;
    background: rgba(16, 22, 23,0.7);*/
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0px;
    top: 0px;
    background-color: rgb(16,22,23);
    color: #000;
    z-index: 99999;
    display: none;
    filter: alpha(opacity=60);
    -moz-opacity: 0.6;
    -khtml-opacity: 0.6;
    opacity: 0.6;
}