A propriedade loadingIndicator
Mostra um indicador de carregamento elegante enquanto a página estiver carregando!
Sem a Renderização no Lado do Servidor (quando a opção ssr
for false
), não há conteúdo do lado do servidor no primeiro carregamento da página. Então, ao invés de mostrar uma página em branco enquanto a página carrega, nós podemos mostrar um rodopiador.
Esta propriedade pode ter três diferentes tipos: que podem ser string
ou boolean
ou object
. Se um valor de sequência de caracteres for fornecido ele será convertido para estilo de objeto.
O valor padrão é:
loadingIndicator: {
name: 'circle',
color: '#3B8070',
background: 'white'
}
Indicadores embutidos
Esses indicadores são importados do incrível projeto do SpinKit . Você pode usar sua página de demonstração para pré-visualizar os rodopiadores.
- circle
- cube-grid
- fading-circle
- folding-cube
- chasing-dots
- nuxt
- pulse
- rectangle-bounce
- rotating-plane
- three-bounce
- wandering-cubes
Os indicadores embutidos suportam as opções color
e background
.
Indicadores personalizados
Se você precisar do seu próprio indicador especial, um valor de sequência de caracteres ou nome de chave pode também ser um caminho para um modelo HTML do código-fonte do indicador! Todas opções são passadas para o modelo também.
O código-fonte do componente de carregamento embutido do Nuxt está disponível se você precisar de uma base!


















































