Skip to main content

Loader

Loader é um indicador de carregamento cujo objetivo é transmitir ao usuário a informação de que o sistema precisa de algum tempo para processar as informações solicitadas, seja o carregamento de uma página ou a execução de um processo, por exemplo.

Como utilizar​

Este componente deve ser utilizado em qualquer situação onde seja necessário dar feedback ao usuário de que um processo em segundo plano está sendo executado e que ele deve aguardar o término dessa operação, seja no carregamento de um ambiente por inteiro ou em partes da interface.

Variação de tamanho​

Este componente também pode ser exibido inline, como no exemplo a seguir, em que o clique no botão dispara uma ação assíncrona e demonstra ao usuário que o resultado está sendo carregado. Neste caso, utiliza-se a classe .spinner-grow-sm para reduzir o tamanho do componente afim de utilizá-lo junto ao texto.

Loader com backdrop​

Nos casos em que a interface ou bloco ainda não estiverem prontos para que o usuário possa interagir com seu conteúdo, recomenda-se o uso do loader com backdrop. Neste caso, o componente ocupará a largura e a altura totais do container que possuir a propriedade CSS position: relative.

Para garantir que o backdrop ocupe a largura e a altura totais da página, é possível combinar a classe spinner-grow-backdrop com a classe auxiliar do Bootstrap 4 position-fixed.

Last updated on