DxWaitIndicator.Template Property

Specifies custom content (for example, an icon) for the Wait Indicator.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public RenderFragment Template { get; set; }

Property Value

Type	Description
RenderFragment	The content markup.

Remarks

Specify custom content of the Wait Indicator in the <Template> tag. The component applies animation specified by the AnimationType property to custom content.

The following example replaces the default spin indicator with a custom icon:

Razor

<DxButton CssClass="my-btn"
          Enabled="!isSending"
          Click="Send"
          RenderStyle="ButtonRenderStyle.Secondary">
    <div class="d-flex">
        <DxWaitIndicator Visible="isSending">
            <Template>
                <div class="indicator-icon" role="img"></div>
            </Template>
        </DxWaitIndicator>
        <span class="mx-2">@Message</span>
    </div>
</DxButton>

@code{
    bool isSending = false;
    string Message => isSending ? "Sending..." : "Send";
    private async Task Send() {
        isSending = true;
        await Task.Delay(3000);
        isSending = false;
    }
}

CSS

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

Run Demo: Animation