You are browsing Nuxt 2 docs. Go to Nuxt 3 docs, or learn more about Nuxt 2 Long Term Support.

翻訳されたページ このページのコンテンツは古い可能性があります。

loading indicator プロパティ

ページ読み込み中に素敵なローディングインジケータを表示します!


サーバーサイドレンダリングでない(ssr オプションが false)場合、最初のページ読み込み時にはサーバーサイドからのコンテンツがありません。そのためページ読み込み中に空白のページのかわりにスピナーを表示することができます。

このプロパティには stringfalseobject の 3 つの異なる型を指定できます。文字列が指定された場合はオブジェクトスタイルに変換されます。

デフォルト値:

loadingIndicator: {
  name: 'circle',
  color: '#3B8070',
  background: 'white'
}

内蔵されているインジケータ

これらのインジケータは素晴らしい SpinKit プロジェクトからインポートされています。SpinKit のデモページを使ってスピナーをプレビューできます。

  • circle
  • cube-grid
  • fading-circle
  • folding-cube
  • chasing-dots
  • nuxt
  • pulse
  • rectangle-bounce
  • rotating-plane
  • three-bounce
  • wandering-cubes

内臓インジケータは colorbackground オプションをサポートしています。

カスタムインジケータ

独自の特別なインジケータが必要な場合は文字列または Name キーをインジケータのソースコードの HTML テンプレートへのパスにすることもできます。すべてのオプションもテンプレートに渡されます。

もしベースが必要な場合はソースコード も利用できます!