<NuxtLoadingIndicator>

Source
페이지 간 내비게이션 사이에 진행 막대를 표시합니다.

Usage

app.vue 또는 app/layouts/에 <NuxtLoadingIndicator/>를 추가하세요.

app/app.vue
<template>
  <NuxtLoadingIndicator />
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>
Read and edit a live example in Docs > 4 X > Examples > Routing > Pages.

Slots

로딩 인디케이터의 기본 슬롯을 통해 커스텀 HTML이나 컴포넌트를 전달할 수 있습니다.

Props

  • color: 로딩 바의 색상입니다. false로 설정하면 명시적인 색상 스타일링을 끌 수 있습니다.
  • errorColor: error가 true로 설정되었을 때 로딩 바의 색상입니다.
  • height: 로딩 바의 높이(픽셀 단위, 기본값 3).
  • duration: 로딩 바의 지속 시간(밀리초 단위, 기본값 2000).
  • throttle: 표시 및 숨김을 지연시키는 시간(밀리초 단위, 기본값 200).
  • estimatedProgress: 기본적으로 Nuxt는 100%에 가까워질수록 속도를 늦춥니다. 진행률 추정을 커스터마이즈하기 위해 커스텀 함수를 제공할 수 있으며, 이 함수는 로딩 바의 지속 시간(위의 값)과 경과 시간을 인자로 받습니다. 0에서 100 사이의 값을 반환해야 합니다.
이 컴포넌트는 선택 사항입니다.
완전한 커스터마이징을 위해 소스 코드를 기반으로 직접 구현할 수 있습니다.
useLoadingIndicator 컴포저블을 사용하여 내부 인디케이터 인스턴스에 훅을 걸 수 있으며, 이를 통해 직접 시작/종료 이벤트를 트리거할 수 있습니다.
로딩 인디케이터의 속도는 estimatedProgress로 제어되는 특정 지점에 도달한 후 점진적으로 감소합니다. 이 조정은 더 긴 페이지 로딩 시간에 대해 보다 정확한 반영을 제공하고, 인디케이터가 너무 일찍 100% 완료로 표시되는 것을 방지합니다.