Круговые индикаторы v-progress-circular

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

Базовая структура компонента выглядит следующим образом:

<v-progress-circular
  :size="70"
  :width="7"
  :value="progress"
  color="primary"
></v-progress-circular>
  • size — диаметр индикатора в пикселях.
  • width — толщина кольца индикатора.
  • value — числовое значение прогресса от 0 до 100.
  • color — цвет индикатора, можно использовать предустановленные цвета Vuetify (primary, secondary, error, success, warning).

Если value не задан, компонент отображается как индетерминированный индикатор, вращающийся бесконечно, что удобно для отображения загрузки данных.

Управление прогрессом

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

data() {
  return {
    progress: 0
  }
},
mounted() {
  setInterval(() => {
    if (this.progress < 100) {
      this.progress += 10
    } else {
      this.progress = 0
    }
  }, 1000)
}

Здесь значение progress изменяется каждые 1 секунду, что демонстрирует плавное заполнение кольца.

Ключевые моменты управления прогрессом:

  • Значение value строго в диапазоне 0–100.
  • При достижении 100 кольцо полностью заполнено.
  • Для бесконечной анимации можно не задавать value, а добавить indeterminate:
<v-progress-circular
  indeterminate
  color="secondary"
  size="50"
></v-progress-circular>

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

Цвет и толщина Цвет кольца задаётся через проп color. Можно использовать темы Vuetify или кастомные цвета:

<v-progress-circular
  :value="60"
  color="#FF5722"
  width="10"
></v-progress-circular>

Размер и ширина кольца

  • size регулирует общий диаметр индикатора.
  • width регулирует толщину линии.

Добавление текста внутри индикатора Для отображения числа прогресса внутри кольца используется слот default:

<v-progress-circular
  :value="progress"
  size="80"
  width="8"
  color="primary"
>
  {{ progress }}%
</v-progress-circular>

Слот позволяет вставлять любой контент, включая иконки или кастомный HTML.

Анимация и поведение

Vuetify поддерживает плавную анимацию заполнения кольца при изменении значения value. Для более сложных эффектов можно использовать CSS-переходы и слоты:

.v-progress-circular__overlay {
  transition: stroke-dasharray 0.5s ease;
}

Проп rotate позволяет поворачивать начальную точку индикатора:

<v-progress-circular
  :value="75"
  rotate="90"
  color="success"
></v-progress-circular>

Здесь отсчёт прогресса начинается с правой стороны (90°).

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

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

<v-progress-circular
  :value="progress"
  :color="progress > 50 ? 'success' : 'warning'"
  size="60"
  width="6"
></v-progress-circular>

Для градиентных эффектов можно использовать CSS:

.gradient-progress .v-progress-circular__underlay,
.gradient-progress .v-progress-circular__overlay {
  stroke: url(#gradient);
}
<svg>
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#FF5722"/>
      <stop offset="100%" stop-color="#FFC107"/>
    </linearGradient>
  </defs>
</svg>
<v-progress-circular class="gradient-progress" :value="80" size="70" width="8"></v-progress-circular>

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

Индикатор загрузки: бесконечное вращение при запросах к серверу. Отображение прогресса: визуализация выполнения задач, например, скачивания файлов, заполнения форм или загрузки данных. Кастомные элементы: комбинация текста, иконок и прогресса позволяет создать компактный и информативный UI-блок.

Советы по оптимизации

  • Не перегружать кольцевой индикатор большим количеством слотов, чтобы не снижать производительность.
  • Использовать indeterminate для асинхронных операций без точного значения прогресса.
  • Применять динамические цвета для визуального обозначения состояния (error, success, warning).
  • При использовании в списках с множеством индикаторов контролировать частоту обновления value, чтобы избежать лишних перерисовок.

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

v-progress-circular хорошо сочетается с компонентами v-btn, v-card и v-dialog:

<v-btn color="primary" :loading="loading">
  Загрузить
  <v-progress-circular
    v-if="loading"
    indeterminate
    color="white"
    size="20"
    width="2"
  ></v-progress-circular>
</v-btn>

Такое решение позволяет встроить индикатор внутрь кнопки, показывая состояние загрузки без отдельного блока.

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

Оглавление