Progress круговой

Круговой индикатор прогресса в библиотеке Naive UI реализуется через компонент n-progress с атрибутом type="circle". Такой индикатор позволяет визуально отображать процент выполнения задачи в виде заполненного круга, что особенно удобно для мониторинга загрузки, прогресса операций или визуальных дашбордов.

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

<n-progress
  type="circle"
  :percentage="75"
  :stroke-width="6"
  :status="'success'"
  :show-text="true"
/>
  • type="circle" — указывает, что индикатор должен быть круговым.
  • percentage — число от 0 до 100, определяющее степень заполнения круга.
  • stroke-width — толщина линии прогресса в пикселях.
  • status — состояние индикатора, может принимать значения 'success', 'warning', 'error', 'default'. Цвет круга меняется автоматически.
  • show-text — отображение текста с процентом внутри круга.

Настройка цветов и стилей

Для кастомизации внешнего вида можно использовать stroke-color и text-color. Это позволяет задать градиенты, однотонные цвета или динамически изменять цвет в зависимости от процента:

<n-progress
  type="circle"
  :percentage="50"
  :stroke-width="8"
  :stroke-color="{ '0%': '#108ee9', '100%': '#87d068' }"
  :text-color="'#333'"
/>
  • stroke-color может быть как строкой с цветом, так и объектом с ключами от '0%' до '100%' для градиентной заливки.
  • text-color задаёт цвет текста, который отображается внутри круга.

Динамический прогресс и анимация

Значение процента можно изменять динамически через реактивное состояние Vue. Круговой прогресс будет плавно анимироваться при изменении значения:

<template>
  <n-progress
    type="circle"
    :percentage="progress"
    :stroke-width="10"
    :status="'success'"
    :show-text="true"
  />
  <n-button @click="increaseProgress">Увеличить</n-button>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const progress = ref(0);

    function increaseProgress() {
      if (progress.value < 100) {
        progress.value += 10;
      }
    }

    return { progress, increaseProgress };
  }
}
</script>

Анимация происходит благодаря встроенной обработке изменений внутри Naive UI, что обеспечивает плавное визуальное отображение заполнения.

Размеры и адаптивность

Круговой прогресс поддерживает изменение размеров через width или через CSS стили:

<n-progress
  type="circle"
  :percentage="60"
  :stroke-width="8"
  style="width: 150px; height: 150px"
/>
  • Применение width и height напрямую влияет на диаметр круга.
  • Толщина линии (stroke-width) масштабируется отдельно, что позволяет сохранять пропорции.

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

Компонент поддерживает автоматическое изменение цветов и иконок для различных состояний:

  • 'success' — зелёный цвет, индикатор завершённого процесса.
  • 'warning' — жёлтый цвет, для предупреждающих состояний.
  • 'error' — красный цвет, для ошибок или остановки процесса.
  • 'default' — нейтральный цвет, серый круг.

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

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

Круговой прогресс удобно использовать вместе с кнопками, таблицами и карточками для отображения состояния задач. Пример интеграции с таблицей задач:

<n-data-table :columns="columns" :data="tasks" row-key="id">
  <template #cell(progress)="row">
    <n-progress
      type="circle"
      :percentage="row.value.progress"
      :stroke-width="6"
      :status="row.value.progress < 50 ? 'warning' : 'success'"
    />
  </template>
</n-data-table>
  • В колонке таблицы отображается прогресс каждой задачи в виде отдельного круга.
  • Статус можно динамически изменять в зависимости от процента выполнения.

Дополнительные возможности

  1. Кастомный текст внутри круга — через слот #default можно выводить не только процент, но и любые другие элементы:
<n-progress type="circle" :percentage="70">
  <template #default>
    {{ 70 }} дней
  </template>
</n-progress>

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

  2. Поддержка тем и глобальной настройки — цвета и размеры можно задавать глобально через Naive UI provider, чтобы единообразно стилизовать все индикаторы прогресса в проекте.

Круговой индикатор прогресса в Naive UI является гибким инструментом для визуализации состояния операций, позволяя управлять стилем, анимацией и интеграцией с другими компонентами интерфейса.

Оглавление