DxLoadingPanel.IndicatorTemplate Property

Specifies custom content for the indicator.

Assembly : DevExpress.Blazor.v25.2.dll

Declaration

csharp

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

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.

razor

<DxLoadingPanel Visible="true" Text="Custom Loading...">
    <IndicatorTemplate>
        <div class="indicator-container">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                 version="1.1" viewBox="0 0 64 64">
                @* ... *@
            </svg>
        </div>
    </IndicatorTemplate>
</DxLoadingPanel>

css

.indicator-container {
    width: 32px; 
    height: 32px; 
    display: flex; 
    align-items: center;
    justify-content: center;
}