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!