Descrição

Um composable que retorna o estado de carregamento da página. Usado por <NuxtLoadingIndicator> e controlável. Ele se conecta aos eventos page:loading:start e page:loading:end para alterar seu estado.

Parâmetros

• duration: Duração da barra de carregamento, em milissegundos (padrão 2000).
• throttle: Controla o aparecimento e desaparecimento, em milissegundos (padrão 200).
• estimatedProgress: Por padrão, o Nuxt irá desacelerar à medida que se aproxima de 100%. Você pode fornecer uma função personalizada para personalizar a estimativa de progresso, que é uma função que recebe a duração da barra de carregamento (acima) e o tempo decorrido. Deve retornar um valor entre 0 e 100.

Propriedades

isLoading

• tipo: Ref<boolean>
• descrição: O estado de carregamento

error

• tipo: Ref<boolean>
• descrição: O estado de erro

progress

• tipo: Ref<number>
• descrição: O estado de progresso. De 0 a 100.

Métodos

start()

Define isLoading como true e começa a aumentar o valor de progress. start aceita uma opção { force: true } para pular o intervalo e mostrar o estado de carregamento imediatamente.

set()

Define o valor de progress para um valor específico. set aceita uma opção { force: true } para pular o intervalo e mostrar o estado de carregamento imediatamente.

finish()

Define o valor de progress para 100, para todos os temporizadores e intervalos e então redefine o estado de carregamento 500 ms depois. finish aceita uma opção { force: true } para pular o intervalo antes que o estado seja redefinido, e { error: true } para mudar a cor da barra de carregamento e definir a propriedade de erro como true.

clear()

Usado por finish(). Limpa todos os temporizadores e intervalos usados pelo composable.

Exemplo

const { progress, isLoading, start, finish, clear } = useLoadingIndicator({
    duration: 2000,
    throttle: 200,
    // Esta é a forma como o progresso é calculado por padrão
    estimatedProgress: (duration, elapsed) => (2 / Math.PI * 100) * Math.atan(elapsed / duration * 100 / 50)
  })

const { start, set } = useLoadingIndicator()
  // mesmo que set(0, { force: true })
  // define o progresso para 0 e mostra o carregamento imediatamente
  start({ force: true })