QCircularProgress круговые индикаторы

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

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

  1. value Определяет текущее значение прогресса в процентах (от 0 до 100).

    <q-circular-progress :value="75" />

    В этом примере кольцо будет заполнено на 75%.

  2. size Задает диаметр индикатора в пикселях. По умолчанию используется 100.

    <q-circular-progress :value="50" size="150" />

  3. thickness Определяет толщину кольца. Значение по умолчанию — 10.

    <q-circular-progress :value="60" thickness="15" />

  4. color и track-color

    • color — цвет заполненной части прогресса.
    • track-color — цвет фона кольца.
    <q-circular-progress :value="40" color="primary" track-color="grey-3" />

  5. indeterminate Устанавливает бесконечный индикатор загрузки, когда прогресс неизвестен.

    <q-circular-progress indeterminate color="secondary" />

  6. angle Определяет угол отображения прогресса. По умолчанию — полный круг (360°), но можно ограничить до 270°, 180° и других значений.

    <q-circular-progress :value="80" angle="270" />

  7. label и label-value Позволяют отображать текст внутри кольца. Можно использовать динамическое значение или произвольный текст.

    <q-circular-progress :value="50" :label-value="progress + '%'" />

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

  • Цвета по теме: можно использовать стандартные классы Quasar (primary, secondary, accent, negative, positive) или собственные цвета CSS.
  • Анимация прогресса: по умолчанию QCircularProgress плавно анимирует изменение значения, но можно отключить анимацию через свойство disable-animation.
  • Внутренние слои: с помощью слота default можно вставлять произвольный контент внутрь индикатора (например, иконки или текстовые метки).

Пример с кастомным слотом:

<q-circular-progress :value="70" color="green" size="120">
  <div class="text-h6">70%</div>
</q-circular-progress>

Использование с динамическими данными

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

<template>
  <q-circular-progress :value="uploadProgress" color="blue" size="120" />
</template>

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

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

QCircularProgress можно интегрировать с QBtn, QCard, QDialog и другими компонентами для создания комплексных интерфейсов:

  • Кнопка с индикатором загрузки:
<q-btn color="primary" :loading="loading" label="Загрузить" @click="startUpload" />
<q-circular-progress v-if="loading" :value="uploadProgress" size="50" color="accent" />
  • Диалог с прогрессом выполнения:
<q-dialog v-model="dialog">
  <q-card>
    <q-card-section class="row justify-center">
      <q-circular-progress :value="progress" size="100" color="positive" />
    </q-card-section>
    <q-card-actions align="right">
      <q-btn flat label="Закрыть" v-close-popup />
    </q-card-actions>
  </q-card>
</q-dialog>

Практические советы

  • Для больших чисел индикаторов использовать size и thickness для поддержания читаемости.
  • Использовать indeterminate для операций с неопределенным временем завершения (загрузка данных с API).
  • Сочетать label с динамическим значением label-value, чтобы отображать текущий прогресс внутри кольца.
  • При интеграции с Vuex или Composition API можно легко синхронизировать прогресс с состоянием приложения.

QCircularProgress в Quasar предоставляет гибкую, визуально привлекательную систему круговых индикаторов, которая подходит как для простых счетчиков прогресса, так и для сложных интерфейсных решений с динамическими данными. Его богатые свойства и возможности стилизации позволяют создавать как статические, так и анимированные индикаторы любой сложности.

Оглавление