LoadingBar плагин

LoadingBar — это плагин библиотеки Quasar Framework, предназначенный для отображения индикатора загрузки в верхней части страницы. Он предоставляет удобный способ визуализировать асинхронные процессы и действия пользователя.

Для начала необходимо подключить плагин в проекте Quasar. В файле quasar.conf.js в разделе plugins указывают LoadingBar:

import { LoadingBar } from 'quasar'

export default function (/* { app, router, ... } */) {
  app.use(LoadingBar, {
    color: 'primary',
    size: '4px',
    position: 'top',
    skipHijack: false
  })
}

Параметры инициализации:

  • color – цвет индикатора (можно использовать стандартные цвета Quasar: primary, secondary, accent и др.).
  • size – толщина полосы загрузки в пикселях.
  • position – положение полосы (top или bottom).
  • skipHijack – если true, LoadingBar не будет автоматически отслеживать асинхронные действия Vue Router.

После подключения плагин становится доступен глобально через this.$q.loadingBar в компонентах Vue.

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

start()

Метод запускает анимацию индикатора с нуля:

this.$q.loadingBar.start()
  • Используется при начале долгого процесса, чтобы дать пользователю визуальный сигнал о загрузке.
  • При вызове несколько раз подряд повторная анимация не создается, индикатор продолжает текущее состояние.

stop()

Полностью останавливает и скрывает индикатор:

this.$q.loadingBar.stop()
  • Можно применять после завершения асинхронного запроса или перехода на другую страницу.
  • Если полоса ещё не достигла конца, stop плавно завершает анимацию.

increment(value)

Позволяет вручную увеличивать прогресс на определенный процент:

this.$q.loadingBar.increment(10)
  • value – число от 1 до 100, на которое увеличивается текущий прогресс.
  • Полезно при детальной визуализации нескольких этапов загрузки.

set(value)

Устанавливает прогресс индикатора на конкретное значение:

this.$q.loadingBar.set(50)
  • value – процент выполнения процесса (0–100).
  • Позволяет синхронизировать визуализацию с реальным прогрессом асинхронной операции.

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

LoadingBar предоставляет гибкую настройку через параметры при инициализации и методы:

  • color – можно динамически менять через метод setDefaults или при создании плагина.
  • size – толщина линии, может быть адаптирована под дизайн приложения.
  • position – top или bottom, чтобы подстроиться под макет.
  • skipHijack – отключает автоматическое слежение за Vue Router и вручную управлять индикатором.

Пример изменения цвета во время работы:

this.$q.loadingBar.setDefaults({ color: 'accent' })
this.$q.loadingBar.start()

Интеграция с асинхронными операциями

LoadingBar идеально подходит для работы с axios или fetch запросами. Типичный пример использования с axios:

import axios from 'axios'

this.$q.loadingBar.start()

axios.get('/api/data')
  .then(response => {
    this.$q.loadingBar.set(70) // визуально показать прогресс
    return response.data
  })
  .finally(() => {
    this.$q.loadingBar.stop()
  })
  • start() запускает индикатор в начале запроса.
  • set() или increment() позволяет отображать промежуточный прогресс.
  • stop() скрывает полосу после завершения.

Автоматическое отслеживание маршрутов

Если skipHijack установлен в false, LoadingBar может автоматически отслеживать переходы Vue Router. Пример стандартного поведения:

// quasar.conf.js
app.use(LoadingBar, { skipHijack: false })

При переходе между страницами:

  • Полоса автоматически запускается при начале маршрута.
  • Завершается после загрузки нового компонента или страницы.
  • Позволяет создавать плавный UX без ручного вызова start/stop на каждом маршруте.

Советы по использованию

  • Использовать LoadingBar только для долгих процессов. Короткие операции могут создать визуальный “мигающий” эффект.
  • Комбинировать методы increment и set для детализированной визуализации прогресса.
  • Цвет и позицию адаптировать под общую палитру интерфейса для минимального отвлечения пользователя.
  • Для крупных проектов рекомендуется централизованно управлять LoadingBar через сервис или Vuex, чтобы избежать дублирования кода.

Пример комплексного применения

this.$q.loadingBar.start()

async function loadData() {
  try {
    const users = await axios.get('/api/users')
    this.$q.loadingBar.increment(30)

    const posts = await axios.get('/api/posts')
    this.$q.loadingBar.increment(50)

    const comments = await axios.get('/api/comments')
    this.$q.loadingBar.set(100)
  } catch (error) {
    console.error(error)
  } finally {
    this.$q.loadingBar.stop()
  }
}

loadData()
  • Пошаговое управление прогрессом через increment и set.
  • Использование try/catch/finally для гарантированного скрытия полосы.
  • Полезно для сложных загрузок с несколькими источниками данных.

LoadingBar является мощным инструментом для улучшения UX, позволяя четко и наглядно информировать пользователя о состоянии процессов, не перегружая интерфейс дополнительными компонентами.

Оглавление