<NuxtLoadingIndicator>

Исходный код
Отображает индикатор выполнения постраничной навигации.

Использование

Добавьте <NuxtLoadingIndicator/> в ваш app.vue или layouts/.

app.vue
<template>
  <NuxtLoadingIndicator />
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>
Прочитайте и отредактируйте живой пример в Docs > 3 X > Examples > Routing > Pages.

Слоты

Вы можете передавать пользовательский HTML или компоненты через слот по умолчанию индикатора загрузки.

Входные параметры

  • color: Цвет индикатора загрузки. Можно установить false, чтобы отключить явное цветовое оформление.
  • errorColor: Цвет индикатора загрузки, когда error установлен в true.
  • height: Высота индикатора загрузки в пикселях (по умолчанию 3).
  • duration: Длительность индикатора загрузки в миллисекундах (по умолчанию 2000).
  • throttle: Регулировка отображения и скрытия в миллисекундах (по умолчанию 200).
  • estimatedProgress: по умолчанию Nuxt замедляет рост индикатора по мере приближения к 100%. Можно задать свою функцию расчёта прогресса: она получает длительность индикатора (см. выше) и прошедшее время и должна вернуть число от 0 до 100.
Этот компонент является необязательным.
Чтобы полностью настроить поведение под свои задачи, вы можете реализовать свой индикатор на основе исходного кода этого компонента.
Вы можете обращаться к основному экземпляру индикатора через композабл useLoadingIndicator и самостоятельно запускать и завершать отображение.
Скорость заполнения индикатора постепенно снижается после достижения определённого порога, задаваемого estimatedProgress. Так достигается более правдоподобное отражение длительной загрузки страницы и не показывается преждевременное «100%».