<NuxtLoadingIndicator>

페이지 이동 시 진행 표시줄을 표시합니다.

사용법

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

app.vue

<template>
  <NuxtLoadingIndicator />
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

Read and edit a live example in Docs > Examples > Routing > Pages.

로딩 인디케이터의 기본 슬롯을 통해 사용자 지정 HTML이나 컴포넌트를 전달할 수 있습니다.

color: 로딩 바의 색상입니다. false로 설정하면 명시적인 색상 스타일링이 비활성화됩니다.
errorColor: error가 true로 설정되었을 때 로딩 바의 색상입니다.
height: 로딩 바의 높이(픽셀 단위, 기본값 3).
duration: 로딩 바의 지속 시간(밀리초 단위, 기본값 2000).
throttle: 표시 및 숨김의 지연 시간(밀리초 단위, 기본값 200).
estimatedProgress: 기본적으로 Nuxt는 100%에 가까워질수록 속도를 늦춥니다. 진행률 추정 방식을 커스터마이즈하려면, 로딩 바의 지속 시간(위의 값)과 경과 시간을 인자로 받는 함수를 제공할 수 있습니다. 이 함수는 0에서 100 사이의 값을 반환해야 합니다.

이 컴포넌트는 선택 사항입니다.
완전한 커스터마이즈를 원한다면 소스 코드를 참고하여 직접 구현할 수 있습니다.

useLoadingIndicator 컴포저블을 사용하여 내부 인디케이터 인스턴스에 연결할 수 있습니다. 이를 통해 직접 시작/종료 이벤트를 트리거할 수 있습니다.

로딩 인디케이터의 속도는 estimatedProgress로 제어되는 특정 지점에 도달한 후 점차 느려집니다. 이 조정은 더 긴 페이지 로딩 시간을 보다 정확하게 반영하고, 인디케이터가 100% 완료를 너무 일찍 표시하는 것을 방지합니다.