DxLoadingPanel.IndicatorTemplate Property

Specifies custom content for the indicator.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.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;
}

To improve performance, your custom icon’s size should match the default indicator’s size that is 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>