Escureça a página para focar a atenção, ou só uma parte dela, e coloque conteúdo como um indicador de carregamento por cima.
Por que ajuda
- Página inteira ou uma região
- Conteúdo por cima
- Simples
Onde se encaixa
- Carregamento
- Foco modal
- Pré-visualizações
Exemplo
<Button Variant="Variant.Outlined" OnClick="Run">Load for 2 seconds</Button>
<div style="position:relative;min-height:8rem" class="doc-demo-box">
Content that is covered while loading.
<Overlay Visible="_busy" Absolute="true"><Stack Align="center"><Spinner /><span>Loading…</span></Stack></Overlay>
</div>
@code {
private bool _busy;
private async Task Run()
{
_busy = true;
StateHasChanged();
await Task.Delay(2000);
_busy = false;
}
}Um pequeno trecho. Adicione @using RayCraft.Blazor.Components à sua página e use um modo de renderização interativo.
Incluído no RayCraft Free. Há exemplos funcionais no repositório do GitHub (MIT); ele contém código de exemplo e demonstração, não o código da biblioteca.