DxLoadingPanel.IndicatorTemplate Property
Specifies custom content for the indicator.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v24.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:
<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>
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 theSmall
size32x32
for theMedium
size40x40
for theLarge
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>
See Also