Для прогресса в виде горизонтальной шкалы возьмите CdsProgressBar, а чтобы затемнить контейнер на время загрузки — CdsOverlay.

Вариации

Значение

Свойство model-value — текущий прогресс в процентах, от 0 до 100. Изменение значения анимируется плавным переходом дуги.

Sandbox Storybook

<script setup lang="ts">
import { CdsProgressCircle } from '@central-design-system/components';

const values = [15, 40, 75, 100];
</script>

<template>
  <div class="flex flex-wrap items-center justify-center gap-4">
    <CdsProgressCircle v-for="value in values" :key="value" :model-value="value" />
  </div>
</template>

Свойство rotate поворачивает начальную точку дуги на указанное число градусов. По умолчанию прогресс растёт от «12 часов» по часовой стрелке.

Sandbox Storybook

<script setup lang="ts">
import { CdsProgressCircle } from '@central-design-system/components';

const rotations = [0, 90, 180, 270];
</script>

<template>
  <div class="flex flex-wrap items-center justify-center gap-4">
    <CdsProgressCircle v-for="rotate in rotations" :key="rotate" :model-value="25" :rotate="rotate" />
  </div>
</template>

Неопределённый прогресс

Свойство indeterminate включает бесконечную анимацию — используйте её, когда ход операции неизвестен. Значение disable-shrink оставляет только вращение без пульсации дуги: такая анимация проще и не нагружает основной поток. Она же включается автоматически для пользователей с настройкой prefers-reduced-motion.

Sandbox Storybook

<script setup lang="ts">
import { CdsProgressCircle } from '@central-design-system/components';
</script>

<template>
  <div class="flex flex-wrap items-center justify-center gap-4">
    <CdsProgressCircle indeterminate />
    <CdsProgressCircle indeterminate="disable-shrink" />
  </div>
</template>

Размеры

Свойство size задаёт диаметр: от xs до xl или число в пикселях. Размер по умолчанию — md.

Sandbox Storybook

<script setup lang="ts">
import { CdsProgressCircle } from '@central-design-system/components';

const { sizes } = CdsProgressCircle.constants;
</script>

<template>
  <div class="flex flex-wrap items-center justify-center gap-4">
    <CdsProgressCircle v-for="size of sizes" :key="size" :size="size" :model-value="65" />
    <CdsProgressCircle :size="72" :model-value="65" />
  </div>
</template>

Контур

Свойство width задаёт толщину контура в пикселях независимо от диаметра.

Sandbox Storybook

<script setup lang="ts">
import { CdsProgressCircle } from '@central-design-system/components';

const widths = [2, 4, 8];
</script>

<template>
  <div class="flex flex-wrap items-center justify-center gap-4">
    <CdsProgressCircle v-for="width in widths" :key="width" :model-value="65" :width="width" size="lg" />
  </div>
</template>

Свойство rounded скругляет концы дуги.

Sandbox Storybook

<script setup lang="ts">
import { CdsProgressCircle } from '@central-design-system/components';
</script>

<template>
  <div class="flex flex-wrap items-center justify-center gap-4">
    <CdsProgressCircle :model-value="65" :width="6" size="lg" />
    <CdsProgressCircle :model-value="65" :width="6" size="lg" rounded />
  </div>
</template>

Цвета

Свойство color красит дугу прогресса, bg-color — фоновое кольцо под ней. Оба принимают токены цвета дизайн-системы.

Sandbox Storybook

<script setup lang="ts">
import { CdsProgressCircle } from '@central-design-system/components';
</script>

<template>
  <div class="flex flex-wrap items-center justify-center gap-4">
    <CdsProgressCircle :model-value="65" color="green" />
    <CdsProgressCircle :model-value="65" color="lemon" />
    <CdsProgressCircle :model-value="65" color="red" />
    <CdsProgressCircle :model-value="65" color="brand-primary" bg-color="red" />
  </div>
</template>

Контент

Слот default выводит контент в центре кольца и получает текущее значение через слот-проп value — удобно показать процент рядом с дугой.

Sandbox Storybook

<script setup lang="ts">
import { CdsProgressCircle } from '@central-design-system/components';
</script>

<template>
  <div class="flex justify-center">
    <CdsProgressCircle :model-value="68" :size="64">
      <template #default="{ value }">{{ Math.round(value) }}%</template>
    </CdsProgressCircle>
  </div>
</template>

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

Свойство reveal анимирует дугу от нуля до текущего значения при появлении компонента. Длительность настраивается объектом: :reveal="{ duration: 1500 }".

Sandbox Storybook

<script setup lang="ts">
import { CdsButton, CdsProgressCircle } from '@central-design-system/components';
import { ref } from 'vue';

const key = ref(0);
</script>

<template>
  <div class="flex flex-col items-center gap-3">
    <CdsProgressCircle :key="key" :model-value="75" :size="64" reveal />
    <CdsButton variant="soft" color="brand" size="sm" text="Повторить" @click="key++" />
  </div>
</template>

Рекомендации

Storybook

Сценарии использования

Загрузка файла

Прогресс загрузки виден в центре кольца через слот default, а по завершении процент сменяется иконкой успеха. Свойство rounded смягчает дугу, color поддерживает позитивный сценарий.

Sandbox Storybook

<script setup lang="ts">
import { CdsButton, CdsIcon, CdsProgressCircle } from '@central-design-system/components';
import { ref } from 'vue';

const progress = ref(0);
const uploading = ref(false);

let timer: ReturnType<typeof setInterval> | undefined;

const upload = () => {
  clearInterval(timer);
  progress.value = 0;
  uploading.value = true;

  timer = setInterval(() => {
    progress.value = Math.min(progress.value + Math.random() * 18, 100);

    if (progress.value === 100) {
      clearInterval(timer);
      uploading.value = false;
    }
  }, 300);
};
</script>

<template>
  <div class="flex flex-col items-center gap-3">
    <CdsProgressCircle :model-value="progress" :size="72" :width="6" rounded color="green">
      <template #default="{ value }">
        <CdsIcon v-if="value === 100" icon="success-fill" color="green" />
        <span v-else>{{ Math.round(value) }}%</span>
      </template>
    </CdsProgressCircle>

    <CdsButton
      prepend-icon="upload"
      :text="progress === 100 ? 'Загрузить ещё раз' : 'Загрузить файл'"
      :disabled="uploading"
      @click="upload"
    />
  </div>
</template>

Заполнение лимита

Кольцо показывает не только процесс, но и статичную величину — например, занятое место в хранилище. Вычисляемый color переключает индикатор с зелёного на жёлтый и красный по мере приближения к лимиту.

Sandbox Storybook

<script setup lang="ts">
import { CdsButton, CdsProgressCircle } from '@central-design-system/components';
import { computed, ref } from 'vue';

const used = ref(52);

const color = computed(() => {
  if (used.value >= 90) return 'red';
  if (used.value >= 70) return 'lemon';
  return 'green';
});
</script>

<template>
  <div class="flex flex-col items-center gap-3">
    <CdsProgressCircle :model-value="used" :size="80" :width="8" :color="color">
      <template #default="{ value }">
        <span class="text-content-secondary">{{ Math.round(value) }} ГБ</span>
      </template>
    </CdsProgressCircle>

    <div class="flex gap-2">
      <CdsButton
        variant="soft"
        color="brand"
        size="sm"
        text="Добавить файлы"
        :disabled="used >= 100"
        @click="used = Math.min(used + 15, 100)"
      />
      <CdsButton
        variant="soft"
        color="neutral"
        size="sm"
        text="Очистить"
        :disabled="used <= 0"
        @click="used = Math.max(used - 30, 0)"
      />
    </div>
  </div>
</template>

Фоновая операция

Компактный indeterminate-индикатор размера xs встаёт в строку с текстом и сообщает, что запущенная операция ещё идёт. Подпись рядом объясняет, чего ждать, — без неё вращающееся кольцо ни о чём не говорит.

Sandbox Storybook

<script setup lang="ts">
import { CdsButton, CdsIcon, CdsProgressCircle } from '@central-design-system/components';
import { ref } from 'vue';

const state = ref<'idle' | 'pending' | 'done'>('idle');

const generate = () => {
  state.value = 'pending';

  setTimeout(() => {
    state.value = 'done';
  }, 2500);
};
</script>

<template>
  <div class="flex flex-col items-center gap-3">
    <CdsButton text="Сформировать отчёт" :disabled="state === 'pending'" @click="generate" />

    <div v-if="state === 'pending'" class="flex items-center gap-2 text-content-secondary">
      <CdsProgressCircle indeterminate size="xs" :width="2" />
      <span>Готовим отчёт — обычно это занимает меньше минуты</span>
    </div>

    <div v-else-if="state === 'done'" class="flex items-center gap-2">
      <CdsIcon icon="success-fill" color="green" />
      <span>Отчёт готов</span>
    </div>
  </div>
</template>

API

Пропсы

Имя	Тип	По умолчанию	Описание
bgColor	string | undefined	—	Цвет фона загрузчика
color	string | undefined	—	Цвет загрузчика
indeterminate	boolean | "disable-shrink" | undefined	—	Постоянно отображается анимация; использовать, если ход загрузки неизвестен. Если задать строку «disable-shrink», будет использоваться более простая анимация, которая не запускается в основном потоке
modelValue	string | number | undefined	0	Значение в процентах текущего прогресса загрузки
reveal	boolean | { duration?: number | undefined; } | undefined	false	Анимирует индикатор от нуля до текущего значения при появлении компонента. Объект { duration } задаёт длительность анимации в миллисекундах
rotate	string | number | undefined	0	Поворачивает начальную точку окружности на указанное количество градусов
rounded	boolean | undefined	—	Скругляет концы дуги прогресса
size	number | "xs" | "sm" | "md" | "lg" | "xl" | undefined	'md'	Размер компонента
tag	string | JSXComponent<any> | undefined	'div'	Пользовательский HTML-тег для отображения
theme	string | undefined	—	Тема компонента
width	string | number | undefined	4	Задает толщину контура круга в пикселях

Слоты

Имя	Тип	Описание
default	{ value: number; }	Слот по умолчанию. Содержит в себе значение процесса индикатора загрузки.