<NuxtLoadingIndicator>

ソース
ページナビゲーション間にプログレスバーを表示します。

使用方法

<NuxtLoadingIndicator/> を app.vue または app/layouts/ に追加してください。

app/app.vue
<template>
  <NuxtLoadingIndicator />
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>
Docs > 4 X > Examples > Routing > Pagesでライブの例を読んで編集してください。

スロット

ローディングインジケーターのデフォルトスロットを介して、カスタムHTMLやコンポーネントを渡すことができます。

プロップス

  • color: ローディングバーの色。false に設定すると、明示的な色指定をオフにできます。
  • errorColor: error が true に設定されている場合のローディングバーの色。
  • height: ローディングバーの高さ (ピクセル単位、デフォルト 3)。
  • duration: ローディングバーの継続時間 (ミリ秒単位、デフォルト 2000)。
  • throttle: 表示と非表示のスロットル (ミリ秒単位、デフォルト 200)。
  • estimatedProgress: デフォルトでは、Nuxt は 100% に近づくと減速します。カスタム関数を指定してプログレスの推定をカスタマイズできます。これは、ローディングバーの継続時間（上記）と経過時間を受け取る関数です。0から100の間の値を返す必要があります。
このコンポーネントはオプションです。
完全にカスタマイズするには、ソースコードを基に独自のコンポーネントを実装できます.
useLoadingIndicator コンポーザブル を使用して、基になるインジケーターインスタンスにフックできます。これにより、開始/終了イベントを自分でトリガーできます。
ローディングインジケーターの速度は、estimatedProgress によって制御される特定のポイントに達すると徐々に低下します。この調整により、長いページ読み込み時間をより正確に反映し、インジケーターが時期尚早に100%完了を表示するのを防ぎます。