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

Анатомия

Шкала собирается из трёх слоёв: индикатор текущего значения, буфер и фон. Поверх слоёв выводится контент слота default. Фон и буфер по умолчанию подкрашены цветом индикатора с сильной прозрачностью — интенсивность настраивают пропы bg-opacity и buffer-opacity.

Storybook

Вариации

Значение

Свойство model-value — текущий прогресс. Шкала считается от 0 до max (по умолчанию 100), поэтому можно передавать «сырые» величины — секунды или мегабайты — не пересчитывая их в проценты. Изменение значения анимируется плавным переходом, а reverse заполняет шкалу справа налево.

Sandbox Storybook

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

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

<template>
  <div class="m-auto flex w-[400px] flex-col gap-4">
    <CdsProgressBar v-for="value in values" :key="value" :model-value="value" />
  </div>
</template>

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

Свойство indeterminate включает бегущую анимацию — используйте её, когда ход операции неизвестен и показать процент нечем.

Sandbox Storybook

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

<template>
  <div class="m-auto w-[400px]">
    <CdsProgressBar indeterminate color="brand-primary" />
  </div>
</template>

Буфер

Свойство buffer-value — вторая шкала между индикатором и фоном: часть, которая уже готова, но ещё не пройдена, например подгруженный фрагмент видео. Чтобы буфер читался на фоне шкалы, увеличьте buffer-opacity; отдельный цвет задаёт buffer-color.

Sandbox Storybook

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

<template>
  <div class="m-auto w-[400px]">
    <CdsProgressBar :model-value="30" :buffer-value="65" buffer-opacity="0.3" color="brand-primary" />
  </div>
</template>

Свойство stream добавляет пунктирную анимацию от края буфера до конца шкалы — сигнал, что данные продолжают поступать. Границу потока задаёт buffer-value, фон при этом скрывается.

Sandbox Storybook

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

<template>
  <div class="m-auto w-[400px]">
    <CdsProgressBar :model-value="25" :buffer-value="60" buffer-opacity="0.3" stream color="brand-primary" />
  </div>
</template>

Высота

Свойство height задаёт высоту шкалы в пикселях. По умолчанию — 4.

Sandbox Storybook

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

<template>
  <div class="m-auto flex w-[400px] flex-col gap-4">
    <CdsProgressBar :model-value="60" :height="2" />
    <CdsProgressBar :model-value="60" />
    <CdsProgressBar :model-value="60" :height="8" />
    <CdsProgressBar :model-value="60" :height="16" />
  </div>
</template>

Скругление

Свойство rounded-bar скругляет ведущий край индикатора. Начало остаётся прямым — шкала читается как непрерывная от нулевой отметки.

Sandbox Storybook

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

<template>
  <div class="m-auto flex w-[400px] flex-col gap-4">
    <CdsProgressBar :model-value="60" :height="8" color="brand-primary" />
    <CdsProgressBar :model-value="60" :height="8" color="brand-primary" rounded-bar />
  </div>
</template>

Цвета

Свойство color красит индикатор и — пока не заданы отдельные цвета — буфер и фон. Свой цвет фона задаёт bg-color, а прозрачность слоёв — opacity для индикатора и bg-opacity для фона.

Sandbox Storybook

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

<template>
  <div class="m-auto flex w-[400px] flex-col gap-4">
    <CdsProgressBar :model-value="60" color="green" />
    <CdsProgressBar :model-value="60" color="lemon" />
    <CdsProgressBar :model-value="60" color="red" />
    <CdsProgressBar :model-value="60" color="brand-primary" bg-color="red" />
  </div>
</template>

Полосы

Свойство striped накладывает на индикатор бегущие диагональные полосы — они оживляют долгие операции с известным ходом.

Sandbox Storybook

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

<template>
  <div class="m-auto flex w-[400px] flex-col gap-4">
    <CdsProgressBar :model-value="45" striped color="brand-primary" :height="12" />
    <CdsProgressBar :model-value="70" striped color="green" :height="12" />
  </div>
</template>

Сегменты

Свойство chunk-count делит шкалу на равные сегменты — например, по числу шагов, — а chunk-width строит сегменты фиксированной ширины. Зазор между ними задаёт chunk-gap. Индикатор заполняет сегменты целиком: значение прилипает к границе ближайшего сегмента.

Sandbox Storybook

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

<template>
  <div class="m-auto flex w-[400px] flex-col gap-4">
    <CdsProgressBar :model-value="60" :chunk-count="10" :height="8" color="brand-primary" />
    <CdsProgressBar :model-value="60" :chunk-width="12" :height="8" color="brand-primary" />
    <CdsProgressBar :model-value="60" :chunk-count="10" :chunk-gap="8" :height="8" color="brand-primary" />
  </div>
</template>

Вариант variant="split" не режет шкалу на части, а отделяет заполненную часть от остатка одним зазором — индикатор и фон читаются как два самостоятельных отрезка.

Sandbox Storybook

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

<template>
  <div class="m-auto flex w-[400px] flex-col gap-4">
    <CdsProgressBar variant="split" :model-value="40" :height="8" color="brand-primary" />
    <CdsProgressBar
      variant="split"
      :model-value="40"
      :buffer-value="70"
      buffer-opacity="0.4"
      :height="8"
      color="brand-primary"
    />
  </div>
</template>

Контент

Слот default выводит контент по центру шкалы и получает слот-пропы value и buffer — нормализованные проценты. Увеличьте height, чтобы контент поместился.

Sandbox Storybook

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

<template>
  <div class="m-auto w-[400px]">
    <CdsProgressBar :model-value="64" :height="20" color="green">
      <template #default="{ value }">{{ Math.round(value) }}%</template>
    </CdsProgressBar>
  </div>
</template>

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

Storybook

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

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

Кнопка запускает загрузку: шкала растёт по мере поступления данных, подпись над ней показывает файл и процент. Цвет green поддерживает позитивный сценарий, а по завершении кнопка предлагает повторить загрузку.

Sandbox Storybook

<script setup lang="ts">
import { CdsButton, CdsProgressBar } 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="m-auto flex w-[360px] flex-col items-center gap-3">
    <div class="flex w-full items-center justify-between">
      <span>report.xlsx</span>
      <span>{{ Math.round(progress) }}%</span>
    </div>

    <CdsProgressBar :model-value="progress" :height="8" color="green" />

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

Шаги мастера

chunk-count по числу шагов превращает шкалу в индикатор мастера: заполненные сегменты — пройденные шаги, полупрозрачные — оставшиеся. Значение — доля текущего шага от общего числа.

Sandbox Storybook

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

const steps = ['Данные компании', 'Контакты', 'Реквизиты', 'Подтверждение'];
const step = ref(1);

const progress = computed(() => (step.value / steps.length) * 100);
</script>

<template>
  <div class="m-auto flex w-[400px] flex-col gap-3">
    <span>Шаг {{ step }} из {{ steps.length }}: {{ steps[step - 1] }}</span>

    <CdsProgressBar :model-value="progress" :chunk-count="steps.length" :height="8" color="brand-primary" />

    <div class="flex justify-between">
      <CdsButton text="Назад" variant="soft" color="brand" :disabled="step === 1" @click="step--" />
      <CdsButton text="Далее" :disabled="step === steps.length" @click="step++" />
    </div>
  </div>
</template>

Перемотка видео

Свойство clickable превращает шкалу в контрол: клик записывает новое значение в v-model. Буфер показывает подгруженный фрагмент, stream — что загрузка продолжается, а подписи считают время из процентов.

Sandbox Storybook

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

const duration = 225;
const position = ref(35);
const buffered = ref(60);

const seek = (value: number) => {
  buffered.value = Math.min(100, value + 25);
};

const format = (percent: number) => {
  const seconds = Math.round((percent / 100) * duration);

  return `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, '0')}`;
};
</script>

<template>
  <div class="m-auto flex w-[400px] flex-col gap-2">
    <CdsProgressBar
      v-model="position"
      clickable
      :buffer-value="buffered"
      buffer-opacity="0.3"
      stream
      :height="8"
      color="brand-primary"
      @update:model-value="seek"
    />

    <div class="flex justify-between">
      <span>{{ format(position) }}</span>
      <span>{{ format(100) }}</span>
    </div>
  </div>
</template>

Обновление данных в карточке

Свойство absolute прижимает шкалу к верхней грани контейнера с position: relative — индикатор не расталкивает контент. Проп active прячет шкалу, плавно сводя высоту к нулю, а indeterminate избавляет от необходимости считать прогресс фоновой операции.

Sandbox Storybook

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

const loading = ref(false);

let timer: ReturnType<typeof setTimeout> | undefined;

const refresh = () => {
  clearTimeout(timer);
  loading.value = true;
  timer = setTimeout(() => (loading.value = false), 2500);
};
</script>

<template>
  <CdsCard class="relative m-auto w-[320px] overflow-hidden">
    <CdsProgressBar absolute indeterminate :active="loading" color="brand-primary" />

    <CdsCardItem>
      <CdsCardTitle>Курсы валют</CdsCardTitle>
    </CdsCardItem>
    <CdsCardText>Доллар — 79,8 ₽, евро — 86,2 ₽. Данные обновляются раз в час.</CdsCardText>

    <CdsCardActions class="justify-end p-4 pt-0">
      <CdsButton
        text="Обновить"
        variant="soft"
        color="brand"
        prepend-icon="refresh"
        :loading="loading"
        @click="refresh"
      />
    </CdsCardActions>
  </CdsCard>
</template>

API

Пропсы

Имя	Тип	По умолчанию	Описание
absolute	boolean | undefined	—	Абсолютное позиционирование компонента
active	boolean | undefined	true	Управление отображением активного состояния прогресс-бара
activeColor	string | undefined	—	Цвет компонента, когда он находится в активном состоянии
baseColor	string | undefined	—	Цвет неактивного компонента
bgColor	string | undefined	—	Цвет фона компонента
bgOpacity	string | number | undefined	—	Прозрачность фона прогресс-бара
bufferColor	string | undefined	—	Цвет буферной части прогресс-бара
bufferOpacity	string | number | undefined	—	Прозрачность буферной части прогресс-бара
bufferValue	string | number | undefined	0	Значение буфера прогресса
chunkCount	string | number | undefined	null	Количество сегментов, на которые разбивается прогресс-бар
chunkGap	string | number | undefined	4	Расстояние между сегментами прогресс-бара
chunkWidth	string | number | undefined	null	Ширина одного сегмента прогресс-бара
clickable	boolean | undefined	—	Делает прогресс-бар кликабельным
color	string | undefined	—	Цвет компонента
height	string | number | undefined	4	Высота прогресс-бара
indeterminate	boolean | undefined	—	Неопределенное состояние прогресса без фиксированного значения
location	Anchor | null | undefined	'top'	Позиционирование элемента относительно его контейнера. Например, "top left", "center", "bottom right" и т.д.
max	string | number | undefined	100	Максимальное значение прогресса
modelValue	string | number | undefined	0	Текущее значение прогресса
opacity	string | number | undefined	—	Прозрачность основного индикатора прогресса
reverse	boolean | undefined	—	Обратное направление заполнения шкалы прогресса
roundedBar	boolean | undefined	—	Скруглять индикатор прогресса
stream	boolean | undefined	—	Отображать потоковую анимацию поверх индикатора прогресса
striped	boolean | undefined	—	Отображать полосы на индикаторе прогресса
tag	string | JSXComponent<any> | undefined	'div'	Пользовательский HTML-тег для отображения
textColor	string | undefined	—	Цвет текста компонента
theme	string | undefined	—	Тема компонента
variant	"split" | undefined	—	Вариант отображения сегментов прогресс-бара

События

Имя	Тип	Описание
update:modelValue	[value: number]	Сработало при изменении значения прогресса — по клику по шкале в режиме clickable

Слоты

Имя	Тип	Описание
default	{ value: number; buffer: number; }	Контент поверх полосы — например подпись с процентом. В параметрах — текущее значение и значение буфера