You are browsing Nuxt 2 docs. Go to Nuxt 3 docs, or learn more about Nuxt 2 Long Term Support.

Page traduite Le contenu de cette page peut être déprécié.

La propriété loading indicator

Affiche des indications de chargement originaux lorsque la page SPA est en train de charger !


Lorsque l'on exécute Nuxt en mode SPA, il n'y a pas de contenu du côté serveur lors du chargement initial de la page. Donc, au lieu d'afficher une page blanche lorsque l'application charge, on pourrait afficher un spinner.

Cette propriété peut prendre 3 types différents: string ou false ou object. Si une chaîne de caractères est fournie, elle sera convertie en objet.

La valeur par défaut est:

loadingIndicator: {
  name: 'circle',
  color: '#3B8070',
  background: 'white'
}

Indicateurs embarqués

Ces indicateurs sont importés depuis le projet génial qu'est Spinkit . On peut se référer à sa page de démo pour prévisualiser les spinners.

  • circle
  • cube-grid
  • fading-circle
  • folding-cube
  • chasing-dots
  • nuxt
  • pulse
  • rectangle-bounce
  • rotating-plane
  • three-bounce
  • wandering-cubes

Built-in indicators support color and background options.

Indicateurs personnalisés

Si vous avez besoin de votre propre indicateur spécial, une chaîne de caractères ou un nom de clé peut aussi être le chemin vers le code source d'un template HTML. Toutes les options seront aussi passées au template.

Le code source de celui de Nuxt est aussi disponible si l'on souhaite avoir une base !