Learn Nuxt with a Collection of 100+ Tips!

<NuxtLoadingIndicator>

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

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

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

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

Слоты

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

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

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