Loading Bar

Компонент Loading Bar в библиотеке Naive UI предназначен для визуализации процесса загрузки или выполнения длительных операций в интерфейсе. Он отображается в виде тонкой горизонтальной полосы, обычно расположенной в верхней части экрана, и может быть как индикатором прогресса, так и индикатором состояния. Основные свойства компонента обеспечивают гибкость его использования и позволяют интегрировать его в любое веб-приложение на Vue.js.

import { NLoadingBarProvider, useLoadingBar } from 'naive-ui'

Использование через провайдер

Для глобального управления Loading Bar используется NLoadingBarProvider, который оборачивает корневой компонент приложения. Провайдер создаёт контекст, через который можно программно управлять отображением полосы загрузки.

<template>
  <n-loading-bar-provider>
    <App />
  </n-loading-bar-provider>
</template>

После этого любой компонент может получить доступ к API Loading Bar через хук useLoadingBar.

const loadingBar = useLoadingBar()

Основные методы API

start() — запускает анимацию полосы загрузки с начальной позиции (обычно 0%).
finish() — завершает загрузку и скрывает полоску.
error() — отмечает полосу как завершённую с ошибкой, меняя цвет на красный.
update(percent: number) — обновляет текущий прогресс до заданного значения (0–100%).

Пример последовательного использования:

loadingBar.start()
setTimeout(() => {
  loadingBar.update(50)
}, 1000)
setTimeout(() => {
  loadingBar.finish()
}, 2000)

Настройка внешнего вида

Компонент предоставляет свойства для тонкой настройки визуального стиля:

height — высота полосы в пикселях.
color — основной цвет индикатора.
failedColor — цвет при ошибке.
position — положение на экране, обычно top.
show — boolean, позволяет скрывать или показывать полоску вручную.

Пример с кастомизацией:

<n-loading-bar-provider :height="4" color="#42b983" failed-color="#f56c6c">
  <App />
</n-loading-bar-provider>

Интеграция с роутером

Одна из ключевых практик — использование Loading Bar при навигации между страницами в Vue Router. Это создаёт ощущение отзывчивого интерфейса и информирует пользователя о загрузке нового контента.

import { useLoadingBar } from 'naive-ui'
import router from './router'

const loadingBar = useLoadingBar()

router.beforeEach((to, from, next) => {
  loadingBar.start()
  next()
})

router.afterEach(() => {
  loadingBar.finish()
})

Для асинхронных операций можно использовать try…catch и вызывать error() при возникновении исключений:

try {
  await fetchData()
  loadingBar.finish()
} catch {
  loadingBar.error()
}

Комбинирование с другими компонентами

Loading Bar часто применяется совместно с кнопками или формами для отображения состояния загрузки данных. Например, при отправке формы можно включить индикатор до получения ответа сервера:

<template>
  <n-button @click="submitForm" :loading="isSubmitting">Отправить</n-button>
</template>

<script setup>
import { ref } from 'vue'
import { useLoadingBar } from 'naive-ui'

const isSubmitting = ref(false)
const loadingBar = useLoadingBar()

const submitForm = async () => {
  isSubmitting.value = true
  loadingBar.start()
  try {
    await sendData()
    loadingBar.finish()
  } catch {
    loadingBar.error()
  } finally {
    isSubmitting.value = false
  }
}
</script>

Тонкости поведения

Автоматическое завершение: Если прогресс не обновляется вручную, Loading Bar плавно завершает анимацию до конца через несколько секунд.
Многократные вызовы: Повторное start() не сбрасывает текущий прогресс, что позволяет использовать несколько параллельных операций.
Контроль через show: Свойство show позволяет полностью скрыть компонент, если нужно временно убрать индикатор с экрана.