<NuxtLoadingIndicator>
Muestra una barra de progreso entre las navegaciones de página.
Uso
Añade <NuxtLoadingIndicator/> en tu app.vue o layouts/.
<template>
<NuxtLoadingIndicator />
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>
Slots
Puedes pasar HTML personalizado o componentes a través del slot predeterminado del indicador de carga.
Props
color: El color de la barra de carga. Se puede establecer enfalsepara desactivar el estilo de color explícito.errorColor: El color de la barra de carga cuandoerrorestá establecido entrue.height: Altura de la barra de carga, en píxeles (por defecto3).duration: Duración de la barra de carga, en milisegundos (por defecto2000).throttle: Regula la aparición y desaparición, en milisegundos (por defecto200).estimatedProgress: Por defecto, Nuxt retrocede a medida que se acerca al 100%. Puedes proporcionar una función personalizada para personalizar la estimación del progreso, que es una función que recibe la duración de la barra de carga (arriba) y el tiempo transcurrido. Debe devolver un valor entre 0 y 100.
Este componente es opcional. :br Para lograr una personalización completa, puedes implementar uno propio basado en su código fuente.
Puedes engancharte a la instancia subyacente del indicador usando el composable useLoadingIndicator, lo que te permitirá activar eventos de inicio/finalización por ti mismo.
La velocidad del indicador de carga disminuye gradualmente después de alcanzar un punto específico controlado por estimatedProgress. Este ajuste proporciona una reflexión más precisa de los tiempos de carga de página más largos y evita que el indicador muestre prematuramente un 100% de finalización.
※Esta página es una traducción no oficial de la documentación oficial de Nuxt.js.
La página correspondiente en la documentación oficial está aquí:
https://nuxt.com/docs/3.x/api/components/nuxt-loading-indicator