Loading de Inicialização do Blazor

Quando executamos um projeto Blazor, até que todos os arquivos da aplicação sejam baixados pelo Browser, é exibido um texto Loading… (Figura 1)

Figura 1: Texto de Inicialização da App Blazor

Muita gente me pergunta como fazer para substituir esse texto por um gif animado, ou alguma “splash page” mais elaborada. Apesar de ser muito simples fazer isso, vou deixar documentado aqui nesse artigo.

index.html

Você vai achar esse texto Loading… na página index.html,que está dentro da pasta wwwroot do seu projeto Blazor.

Veja na Figura 2 que o texto é colocado dentro da tag <app></app>, que está dentro do body do HTML.

Figura 2: Loading… no index.html

Essa tag app é exatamente onde a aplicação Blazor será renderizada, ocupando todo o body do index. Qualquer coisa que passarmos no conteúdo dessa tag irá aparecer durante o processo de download e inicialização da sua aplicação.

loading.gif

Vamos trocar o texto Loading… por um gif animado qualquer. Nesse exemplo, nosso gif se chama loading.gif, e foi colocado na pasta wwwroot/images/.

Para centralizar o gif na página, vamos adicionar a classe .loading no arquivo site.css, que fica na pasta wwwroot/css/. Veja essa classe css na Figura 3.

Figura 3: CSS para centralizar gif animado

Voltando ao index.html, substitua o texto Loading… pelo gif animado, como mostra a Figura 4.

Figura 4: loading.gif

E pra fechar, vamos executar a aplicação para ver o resultado, como mostra a Figura 5.

Figura 5: Testando Loading com gif animado

Essa é uma atividade extremamente simples, e você pode elaborar o loading da sua aplicação como desejar.

Grande Abraço e até o próximo!

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s