Прогресс-бары v-progress-linear

Компонент v-progress-linear в Vuetify используется для отображения линейного индикатора прогресса. Он позволяет визуализировать выполнение задач, загрузку данных или любой процесс с известной или неизвестной степенью завершенности.

Базовый синтаксис компонента:

<v-progress-linear :value="50"></v-progress-linear>

Здесь атрибут value определяет процент заполнения полосы. Значение должно находиться в диапазоне от 0 до 100.

Атрибуты и свойства

Основные свойства v-progress-linear:

  • value — числовое значение прогресса (0–100).
  • buffer-value — используется для отображения буфера при загрузке данных, например в видео или потоковой передаче.
  • height — высота прогресс-бара в пикселях.
  • color — основной цвет заполненной части.
  • background-color — цвет фоновой части.
  • indeterminate — если установлено в true, прогресс будет анимирован как бесконечный, не имея конкретного значения.
  • stream — активирует анимацию перемещающейся полосы, указывая процесс в режиме «stream».
  • striped — создаёт эффект полосатой заливки для динамического визуального отображения прогресса.

Пример с пользовательской высотой и цветами:

<v-progress-linear
  :value="70"
  height="20"
  color="green"
  background-color="grey lighten-2"
></v-progress-linear>

Индикаторы состояния

Прогресс-бары могут отображать несколько типов состояния:

  1. Обычный прогресс с конкретным значением
<v-progress-linear :value="35" color="blue"></v-progress-linear>
  1. Буферизация

Используется для демонстрации двух слоёв: прогресс и загруженный буфер.

<v-progress-linear
  :value="40"
  :buffer-value="70"
  color="blue"
  background-color="grey lighten-2"
></v-progress-linear>
  1. Неопределённый прогресс

Для процессов, где точный процент неизвестен:

<v-progress-linear indeterminate color="deep-purple accent-4"></v-progress-linear>
  1. Полосатый и анимированный прогресс
<v-progress-linear striped stream color="orange"></v-progress-linear>

Интеграция с данными

Прогресс-бары часто связаны с динамическими данными из состояния компонента. Используется двусторонняя привязка через v-model или обновление value через вычисляемые свойства.

Пример с динамическим обновлением прогресса:

<template>
  <v-progress-linear :value="progress" color="teal"></v-progress-linear>
</template>

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

Пользовательские метки и текст

Прогресс-бары могут отображать текст с процентами или статусами:

<v-progress-linear
  :value="progress"
  color="pink"
  height="25"
>
  <template #default>
    {{ progress }}%
  </template>
</v-progress-linear>

Использование слотов позволяет полностью контролировать содержимое прогресс-бара.

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

Для изменения внешнего вида можно применять встроенные классы Vuetify, кастомные CSS-переменные или глобальные темы. Пример с закругленными краями и тенью:

<v-progress-linear
  :value="60"
  color="cyan"
  height="15"
  rounded
  class="elevation-2"
></v-progress-linear>
  • rounded — закругляет углы.
  • elevation-2 — добавляет лёгкую тень для объёмного эффекта.

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

v-progress-linear хорошо интегрируется с карточками, списками и модальными окнами для отображения состояния загрузки. Например, можно поместить прогресс внутрь v-card для загрузки контента:

<v-card>
  <v-card-title>Загрузка данных</v-card-title>
  <v-card-text>
    <v-progress-linear :value="progress" color="purple"></v-progress-linear>
  </v-card-text>
</v-card>

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

Прогресс-бары v-progress-linear позволяют гибко визуализировать процесс выполнения, поддерживают динамическое управление, буферизацию, неопределённое состояние, полосатые анимации и кастомные текстовые метки. Их оформление легко подстраивается под дизайн проекта через цвета, высоту, закругление и встроенные классы Vuetify.

Это делает v-progress-linear универсальным инструментом для создания информативных и визуально привлекательных индикаторов прогресса в интерфейсах на Vue.js с Vuetify.

Оглавление