ProgressBarCircle

Круговой детерминированный индикатор. Занимает минимум места и хорошо читается в плотных интерфейсах — рядом с аватаром при upload, в ячейке таблицы, в карточке файла.

Демо

<ProgressBarCircle appearance="primary" size="s" progress={50} />

Когда использовать

• Индикатор загрузки рядом с аватаром или миниатюрой.
• Прогресс в ячейках таблицы или в списке файлов.
• Там, где линейный индикатор слишком широкий.

Когда не нужен ProgressBarCircle: если есть горизонтальное место и вы хотите показать явный процент рядом — возьмите линейный ProgressBar.

Анатомия

Size

xs — дефолт, для ячеек таблиц и плотных списков; s — для карточек и более заметных мест.

Appearance

Семантика цвета заполненной дуги: primary — бренд/нейтральный; red — ошибка/превышение лимита; orange/yellow — предупреждение; green — успех; blue, violet, pink — декоративные категории.

Установка

pnpm add @cloud-ru/ds-progress-bar

import { ProgressBarCircle } from '@cloud-ru/ds-progress-bar'

Примеры использования

Значение 75%

import { ProgressBarCircle } from '@cloud-ru/ds-progress-bar';

export function CircleStatic() {
  return <ProgressBarCircle progress={75} />;
}

Три appearance

import { APPEARANCE, ProgressBarCircle } from '@cloud-ru/ds-progress-bar';

export function CircleAppearances() {
  return (
    <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
      <ProgressBarCircle progress={60} appearance={APPEARANCE.Primary} />
      <ProgressBarCircle progress={60} appearance={APPEARANCE.Green} />
      <ProgressBarCircle progress={60} appearance={APPEARANCE.Red} />
    </div>
  );
}

Props

Types

ProgressBarCircleProps

Unions

Appearance

ProgressBarCircleSize

Storybook

Figma