Hi Belle,
Greetings from Syncfusion support,
We have validated your reported query. The SfSpinner will be positioned, to the center of the target element where is it placed. We have prepared a sample for your reference, placing the SfSpinner in the MainLayout page which show to the center of the page.
Code Snippet:
MainLayout.razor:
|
<CascadingValue Value="@this">
<div class="sidebar">
<NavMenu />
</div>
<div class="main">
<div class="top-row px-4">
</div>
<div class="content px-4">
@Body
</div>
<SfSpinner @bind-Visible="@SpinnerVisible" CssClass="e-spin-overlay">
</SfSpinner>
</div>
</CascadingValue>
@code{
public bool SpinnerVisible { get; set; } = false;
public async Task ClickHandler()
{
this.SpinnerVisible = true;
StateHasChanged();
await Task.Delay(2000);
this.SpinnerVisible = false;
StateHasChanged();
}
} |
Index.razor
|
@using Syncfusion.Blazor.Buttons
<div>
<p>Click the button to show the spinner</p>
<SfButton @onclick="@ClickHandler">Show/Hide Spinner</SfButton>
</div>
@code{
[CascadingParameter]
public MainLayout mainLayoutObj { get; set; }
private async Task ClickHandler()
{
await mainLayoutObj.ClickHandler();
}
protected async override Task OnInitializedAsync()
{
await mainLayoutObj.ClickHandler();
}
} |
This ClickHandler method can be called anywhere from the page depends on the usage,
Note: Use `CascadingValue` in the MainLayout to access the main layout anywhere in the body.
Please let us know if the solution helps,
Regards,
Indrajith
