DxWaitIndicator Class

A loading indicator component that can be embedded into other UI components.

Assembly : DevExpress.Blazor.v25.2.dll

Declaration

csharp

public class DxWaitIndicator :
    DxComponentBase

Remarks

The Wait Indicator component displays progress of time-consuming operations. You can embed Wait Indicator into other UI components (for example, buttons or data editors).

Run Demo

Add a Wait Indicator to a Project

Follow the steps below to add a Wait Indicator component to an application:

Create a Blazor Server or Blazor WebAssembly application.
Add component markup to a .razor file: <DxWaitIndicator>…</DxWaitIndicator>.
Write code that manages the Wait Indicator’s visibility.
Configure other options (see sections below).

API Reference

Refer to the following list for the component API reference: DxWaitIndicator Members.

Static Render Mode Specifics

Blazor Wait Indicator supports static render mode to indicate progress with streaming rendering. For other features, you need to enable interactivity on a Razor page and allow the Wait Indicator component to execute scripts and display data.

Index.razor

razor

@rendermode InteractiveServer

Display a Wait Indicator

Use the Visible property to show/hide the Wait Indicator when an operation starts/finishes.

The following example imitates a lengthy operation. During this operation the Button becomes disabled and the Wait Indicator appears.

razor

<DxButton Enabled="!isSending"
          Click="Send"
          RenderStyle="ButtonRenderStyle.Secondary">
    <div class="d-flex">
        <DxWaitIndicator Visible="isSending" />
        <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;
    }
}

Customize Appearance

Use the CssClass property to apply custom styles to the Wait Indicator.

Razor
CSS

razor

<DxButton Enabled="!isSending"
          Click="Send"
          RenderStyle="ButtonRenderStyle.Primary">
    <div class="d-flex">
        <DxWaitIndicator Visible="isSending"
                         CssClass="my-indicator" />
        <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

.my-indicator {
    opacity: 0.5;
}

You can also customize the component’s content. Use the following API members:

AnimationTypeSpecifies the animation type.TemplateSpecifies custom content (for example, an icon) for the Wait Indicator.SizeModeSpecifies the size of the component.

Run Demo: Animation

Implements

IComponent

IHandleEvent

IHandleAfterRender

Inheritance

Object ComponentBase DxComponentBase DxWaitIndicator