QLinearProgress линейные индикаторы

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

Компонент поддерживает два основных режима: детерминированный и индетерминированный.

  • Детерминированный режим применяется, когда известен точный процент выполнения задачи. В этом режиме значение прогресса задаётся через свойство value (число от 0 до 100).
  • Индетерминированный режим используется для процессов с неопределённой длительностью. Здесь прогресс движется анимацией, создавая эффект «загрузки в процессе», и значение value не требуется.
<q-linear-progress value="45" color="primary" track-color="grey-3" />
<q-linear-progress indeterminate color="secondary" />

Основные свойства

  • value — число от 0 до 100, определяет процент заполнения индикатора.
  • color — цвет полосы прогресса; можно использовать стандартные цвета Quasar (primary, secondary, accent) или любой CSS-цвет.
  • track-color — цвет фона трека, на котором движется индикатор.
  • indeterminate — логическое значение; если true, индикатор работает в режиме неопределённого прогресса.
  • buffer-value — число от 0 до 100, задающее вторичную полосу (например, для отображения кэширования или загрузки с буфером).
  • size — толщина полосы в пикселях; позволяет адаптировать визуализацию под дизайн приложения.
  • striped — делает индикатор полосатым, создавая эффект динамичного движения.
<q-linear-progress 
  value="70" 
  buffer-value="90" 
  color="teal" 
  track-color="grey-4" 
  size="8px" 
  striped 
/>

Стилизация и кастомизация

QLinearProgress поддерживает широкие возможности кастомизации:

  1. Цветовая схема: можно комбинировать color и track-color для создания контраста.
  2. Толщина полосы: свойство size позволяет интегрировать индикатор в разные компоненты интерфейса без нарушения визуального баланса.
  3. Динамические эффекты: использование striped и animated создаёт визуально привлекательный эффект движения, который особенно полезен для фоновых загрузок.

Пример динамического изменения цвета в зависимости от значения прогресса:

<q-linear-progress 
  :value="progress" 
  :color="progress > 80 ? 'green' : 'orange'" 
  track-color="grey-2" 
/>

Работа с буфером

Свойство buffer-value позволяет создавать двойной индикатор: основной прогресс и дополнительный буфер, что полезно для отображения кэширования данных, загрузки потоков или предзагрузки ресурсов.

<q-linear-progress 
  value="60" 
  buffer-value="85" 
  color="blue" 
  track-color="grey-3" 
/>

Здесь основной индикатор заполнен на 60%, а буфер на 85%, что наглядно показывает прогресс и потенциальное покрытие ресурсов.

Динамическое управление прогрессом через Vue

Поскольку Quasar основан на Vue.js, управление QLinearProgress удобно через реактивные данные. Например:

<template>
  <q-linear-progress :value="progress" color="primary" />
  <q-btn label="Увеличить" @click="increaseProgress" />
</template>

<script>
export default {
  data() {
    return {
      progress: 0
    }
  },
  methods: {
    increaseProgress() {
      if (this.progress < 100) this.progress += 10;
    }
  }
}
</script>

Такое управление позволяет динамически обновлять индикатор в зависимости от состояния приложения или результата асинхронных операций.

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

QLinearProgress идеально подходит для отображения статуса асинхронных задач, таких как загрузка файлов, API-запросы или вычисления на клиенте.

<template>
  <q-linear-progress :value="progress" color="accent" />
</template>

<script>
export default {
  data() {
    return {
      progress: 0
    };
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      let interval = setInterval(() => {
        if (this.progress >= 100) {
          clearInterval(interval);
        } else {
          this.progress += 5;
        }
      }, 100);
    }
  }
}
</script>

В этом примере прогресс динамически обновляется, создавая плавную визуализацию процесса загрузки.

Анимация и пользовательский опыт

Использование свойств striped, animated и indeterminate улучшает восприятие прогресса пользователем:

  • striped — добавляет полоски, визуально подчеркивая движение.
  • animated — обеспечивает плавную анимацию полос.
  • indeterminate — показывает непрерывное движение при неизвестной длительности операции.

Комбинируя эти свойства, можно создавать визуальные эффекты, соответствующие любому стилю интерфейса.

Применение в реальных интерфейсах

  • Загрузка страниц и компонентов: индикатор размещается в верхней части приложения.
  • Процессы загрузки файлов: отображение прогресса загрузки и буфера.
  • Асинхронные операции API: визуальная обратная связь для пользователя.
  • Долгие вычисления: информирование о состоянии процесса без блокировки интерфейса.

QLinearProgress сочетает гибкость, удобство интеграции с Vue и широкие возможности кастомизации, позволяя создавать как минималистичные, так и визуально насыщенные индикаторы прогресса.

Оглавление