在Blazor页面中添加加载指示器可以通过以下步骤完成：

1. 首先，创建一个名为LoadingIndicator的组件：

// LoadingIndicator.razor


    

    
Loading...


@code {
    [Parameter]
    public bool IsLoading { get; set; }
}

这个组件包含一个显示加载指示器的div元素，以及一些用于显示加载消息和旋转动画的CSS样式。

2. 接下来，在需要显示加载指示器的页面中使用LoadingIndicator组件：

// MyPage.razor

@page "/mypage"

My Page



Load Data

@code {
    private bool IsLoading { get; set; }

    private async Task LoadData()
    {
        IsLoading = true;

        // Simulate loading data
        await Task.Delay(2000);

        IsLoading = false;
    }
}

在这个例子中，我们在MyPage组件中添加了一个按钮，当点击按钮时会显示加载指示器。LoadData方法用于模拟加载数据的过程。在加载数据之前，我们将IsLoading属性设置为true，加载完成后将其设置为false。

3. 最后，在CSS文件中添加样式以显示加载指示器：

/* styles.css */

.loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
}

.spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 2s linear infinite;
}

.message {
    margin-top: 10px;
    color: #fff;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

这些CSS样式用于定义加载指示器的外观和动画效果。

现在，当用户点击“Load Data”按钮时，加载指示器将显示在页面上，直到数据加载完成。