UpdateProgress Component Samples

The UpdateProgress component emulates the Web Forms asp:UpdateProgress control, which displayed a loading indicator during asynchronous postbacks. The component renders its ProgressTemplate content, hidden by default using either display:none (DynamicLayout=true) or visibility:hidden (DynamicLayout=false).

DynamicLayout = true (Default)

When DynamicLayout is true (the default), the progress content is rendered with display:none, which removes it from the page layout entirely.

<UpdateProgress DynamicLayout="true">
    <ProgressTemplate>
        <div class="alert alert-info">
            <span class="spinner-border spinner-border-sm"></span>
            Loading, please wait...
        </div>
    </ProgressTemplate>
</UpdateProgress>

Note: The content above is hidden with display:none — it takes no space in the layout.

DynamicLayout = false

When DynamicLayout is false, the progress content is rendered with visibility:hidden, which hides it but reserves its layout space.

<UpdateProgress DynamicLayout="false">
    <ProgressTemplate>
        <div class="alert alert-warning">
            Processing your request...
        </div>
    </ProgressTemplate>
</UpdateProgress>

Note: The content above is hidden with visibility:hidden — it still occupies space in the layout.

Associated with an UpdatePanel

Use AssociatedUpdatePanelID to link the progress indicator to a specific UpdatePanel. The DisplayAfter property sets the delay in milliseconds before the progress content appears (default is 500ms).

<UpdateProgress AssociatedUpdatePanelID="myPanel" DisplayAfter="200">
    <ProgressTemplate>
        Updating panel content...
    </ProgressTemplate>
</UpdateProgress>

Web Forms Equivalent

<!-- Web Forms -->
<asp:UpdateProgress ID="UpdateProgress1" runat="server"
    AssociatedUpdatePanelID="UpdatePanel1" DisplayAfter="500">
    <ProgressTemplate>
        <img src="loading.gif" alt="Loading..." />
        Please wait...
    </ProgressTemplate>
</asp:UpdateProgress>