Descripción

Un composable que devuelve el estado de carga de la página. Utilizado por <NuxtLoadingIndicator> y controlable. Se conecta a page:loading:start y page:loading:end para cambiar su estado.

Parámetros

• duration: Duración de la barra de carga, en milisegundos (por defecto 2000).
• throttle: Limitar la aparición y ocultación, en milisegundos (por defecto 200).
• 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.

Propiedades

isLoading

• tipo: Ref<boolean>
• descripción: El estado de carga

error

• tipo: Ref<boolean>
• descripción: El estado de error

progress

• tipo: Ref<number>
• descripción: El estado de progreso. De 0 a 100.

Métodos

start()

Establece isLoading a true y comienza a aumentar el valor de progress. start acepta una opción { force: true } para omitir el intervalo y mostrar el estado de carga inmediatamente.

set()

Establece el valor de progress a un valor específico. set acepta una opción { force: true } para omitir el intervalo y mostrar el estado de carga inmediatamente.

finish()

Establece el valor de progress a 100, detiene todos los temporizadores e intervalos y luego restablece el estado de carga 500 ms después. finish acepta una opción { force: true } para omitir el intervalo antes de que se restablezca el estado, y { error: true } para cambiar el color de la barra de carga y establecer la propiedad de error a true.

clear()

Utilizado por finish(). Limpia todos los temporizadores e intervalos utilizados por el composable.

Ejemplo

const { progress, isLoading, start, finish, clear } = useLoadingIndicator({
    duration: 2000,
    throttle: 200,
    // Así es como se calcula el progreso por defecto
    estimatedProgress: (duration, elapsed) => (2 / Math.PI * 100) * Math.atan(elapsed / duration * 100 / 50)
  })

const { start, set } = useLoadingIndicator()
  // igual que set(0, { force: true })
  // establece el progreso a 0 y muestra la carga inmediatamente
  start({ force: true })