Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxLoadingPanel.IndicatorTemplate Property

Specifies custom content for the indicator.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
[Parameter]
public RenderFragment IndicatorTemplate { get; set; }

#Property Value

Type Description
RenderFragment

The content markup.

#Remarks

Use the <IndicatorTemplate> tag to customize the content of an indicator. In this case, you can specify the Loading Panel’s target content as follows:

  • Use the ChildContent render fragment.
  • Use the PositionTarget property.
  • Add the LoadingPanel to the page without additional parameters.

In the following example, the default indicator is replaced with a custom icon:

<DxLoadingPanel Visible="true"
                ApplyBackgroundShading="true"
                CssClass="w-100">
    <IndicatorTemplate>
        <div class="indicator-icon" role="img"></div>
    </IndicatorTemplate>
    <ChildContent>
        <DxMemo @bind-Text="@Text"
                Rows="10" />
    </ChildContent>
</DxLoadingPanel>

Custom icon

Note

Since ChildContent contains nested markup of its parent class, the template content must conform to HTML semantics.

To improve performance, your custom icon’s size should match the default indicator’s size defined by the SizeMode property value:

  • 24x24 for the Small size
  • 32x32 for the Medium size
  • 40x40 for the Large size

If your custom icon’s size is smaller than the default indicator’s, wrap the icon with a <div> container with the corresponding size.

Razor
<DxLoadingPanel Visible="true" Text="Custom Loading...">
    <IndicatorTemplate>
        <div style="width: 32px; height: 32px; display: flex; align-items: center;
             justify-content: center;">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                 version="1.1" viewBox="0 0 64 64">
                @* ... *@
            </svg>
        </div>
    </IndicatorTemplate>
</DxLoadingPanel>
See Also