DxLoadingPanel.IndicatorTemplate Property

Specifies custom content for the indicator.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v25.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[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:

Razor

<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>

CSS

.indicator-icon {
    background-image: url("/images/Information.svg");
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
}

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.

<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>