DxWaitIndicator Class

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

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.1.dll

NuGet Package: DevExpress.Blazor

Declaration

public class DxWaitIndicator :
    DxSizableComponentBase

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:

1. Use a DevExpress Project Template to create a new Blazor Server or Blazor WebAssembly application. If you use a Microsoft project template or already have a Blazor project, configure your project to incorporate DevExpress Blazor components.
2. Add component markup to a .razor file: <DxWaitIndicator>…</DxWaitIndicator>.
3. Write code that manages the Wait Indicator’s visibility.
4. Configure other options (see sections below).

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.

<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.

<style>
    .my-indicator {
        <!-- your CSS rules -->
    }
</style>

<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;
    }
}

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

AnimationType

Specifies the animation type.

Template

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

SizeMode

Specifies the size of a dialog’s inner elements. Also affects a dialog’s size and content.

Run Demo: Animation

Implements

IComponent

IHandleEvent

IHandleAfterRender

Inheritance

Object

ComponentBase

DxSizableComponentBase

DxWaitIndicator