<NuxtLoadingIndicator>
ページ間のナビゲーション中にプログレスバーを表示します。
使用方法
<NuxtLoadingIndicator/>をapp.vueまたはlayouts/に追加します。
app.vue
<template>
<NuxtLoadingIndicator />
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>
ドキュメント > 例 > ルーティング > ページでライブ例を読み書きできます。
スロット
ローディングインジケーターのデフォルトスロットを介して、カスタムHTMLまたはコンポーネントを渡すことができます。
プロパティ
color: ローディングバーの色。明示的な色のスタイルをオフにするにはfalseに設定できます。errorColor:errorがtrueに設定されている場合のローディングバーの色。height: ローディングバーの高さ（ピクセル単位）（デフォルト3）。duration: ローディングバーの表示時間（ミリ秒単位）（デフォルト2000）。throttle: 表示と非表示のスロットル時間（ミリ秒単位）（デフォルト200）。estimatedProgress: デフォルトでは、Nuxtは100％に近づくとバックオフします。ローディングバーの表示時間（上記）と経過時間を取得するカスタム関数を提供して、進捗状況の推定をカスタマイズできます。0〜100の値を返す必要があります。
このコンポーネントはオプションです。
完全なカスタマイズを実現するには、ソースコードに基づいて独自のコンポーネントを実装できます。
完全なカスタマイズを実現するには、ソースコードに基づいて独自のコンポーネントを実装できます。
useLoadingIndicatorコンポーザブルを使用して基になるインジケーターインスタンスにフックできます。これにより、開始/終了イベントを自分でトリガーできます。ローディングインジケーターの速度は、
estimatedProgressによって制御される特定のポイントに達した後、徐々に低下します。この調整により、より長いページの読み込み時間をより正確に反映し、インジケーターが100％完了を示すのを早すぎるのを防ぎます。