Loader

Utilize o componente Loader para indicar que um processo está em andamento e que o utilizador deve aguardar até que seja concluído. Este componente é crucial para manter a transparência durante operações que requerem tempo, como o carregamento de dados ou o processamento de uma transação.

Características Principais

Feedback Visual

Fornece uma indicação visual que ajuda a gerir as expectativas do utilizador durante esperas necessárias.

Melhoria da Experiência do Utilizador

Previne a confusão e frustração ao mostrar claramente que a aplicação está a processar algo e não está simplesmente inativa.

Perspetivas a Considerar

Impacto na Percepção de Velocidade

Enquanto os loaders são úteis para indicar atividade, o seu uso excessivo ou durante períodos prolongados pode levar à perceção de que a aplicação é lenta.

Alternativas de Design

Em alguns casos, pode ser mais benéfico utilizar técnicas que permitem ao utilizador continuar interagindo com outras partes da aplicação enquanto esperam, como o carregamento em background de dados.

Exemplo de Utilização

• Páginas ou recursos que necessitam de carregar grandes quantidades de dados.
• Aplicações que realizam verificações ou atualizações de estado no servidor.
• Durante submissões de formulários onde os dados estão sendo processados.

Incorpore o componente Loader de forma equilibrada e considere outras técnicas de design para manter a eficiência e a satisfação do utilizador em situações de espera.

                                                    
<div class="gra-padding-xs gra-margin-bottom-m">
    <div class="gra-spinner small"></div>
</div>
<div class="gra-padding-xs gra-margin-bottom-m">
    <div class="gra-spinner medium"></div>
</div>
<div class="gra-padding-xs gra-margin-bottom-m">
    <div class="gra-spinner large"></div>
</div>
<div class="gra-padding-xs">
    <div class="gra-spinner xLarge"></div>
</div>