LoadStatus

Строка загрузки: опциональный заголовок (метка, значение, процент), линейный ProgressBar и подсказка снизу. Цвет полосы — через appearanceByProgress; ошибка — showError (полоса red).

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

• В карточках и формах, где нужно показать прогресс операции с поясняющим текстом.
• Когда нужны пороги заполнения или фиксированный цвет полосы (appearanceByProgress).
• Когда операция завершилась с ошибкой (showError).

Когда не нужен LoadStatus:

• Только индикатор без подписей — используйте ProgressBar.
• Неопределённая загрузка страницы — ProgressBarPage.

Анатомия

Size (default s)

Ось Figma size, прокидывается в @cloud-ru/ds-progress-bar:

• s — основной размер в формах и карточках.
• xs — компактные списки и плотные layout’ы.

appearanceByProgress (default DEFAULT_APPEARANCE_BY_PROGRESS)

Цвет полосы: список правил { condition, limit, appearance } (eq / gt / gte / lt / lte). Первое сработавшее правило задаёт цвет. Значения appearance — из @cloud-ru/ds-progress-bar: primary, neutral, orange, yellow, green, blue, violet, pink, red.

Дефолт — зелёный / жёлтый / красный по порогам 70 / 90 / 100. Фиксированный цвет из макета (ось Figma appearance) — одно правило, например lte: 100 с нужным appearance.

showError (default false)

Ось Figma showError:

• false — цвет полосы из appearanceByProgress.
• true — полоса всегда red, перекрывает appearanceByProgress. В hint обычно показывают иконку (showErrorIcon).

Контент

Видимость блоков — по truthiness props (boolean-оси showLabel / showValue / showHint / showPercent в Figma только для Dev Mode):

• label — основной текст слева в заголовке.
• value — дополнение рядом с label.
• valueType — none или percent; при percent справа выводится {progress}% (два текстовых слоя в макете: число и %).
• hint — подпись под полосой; при showErrorIcon слева — NotifierCriticalFilled 16px.
• progress — значение 0–100 для полосы и процента в заголовке.

Установка

pnpm add @cloud-ru/ds-uikit-product-load-status

import { LoadStatus } from '@cloud-ru/ds-uikit-product-load-status'

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

Процент в заголовке

import { LoadStatus } from '@cloud-ru/ds-uikit-product-load-status';

export function WithPercent() {
  return <LoadStatus label='Загрузка' progress={72} valueType='percent' />;
}

Фиксированный цвет полосы

import { APPEARANCE } from '@cloud-ru/ds-progress-bar';
import { LoadStatus, PROGRESS_LIMIT_CONDITION } from '@cloud-ru/ds-uikit-product-load-status';

export function WithAppearance() {
  return (
    <LoadStatus
      label='Загрузка'
      progress={65}
      valueType='percent'
      hint='Статичный цвет полосы'
      appearanceByProgress={[{ condition: PROGRESS_LIMIT_CONDITION.Lte, limit: 100, appearance: APPEARANCE.Green }]}
    />
  );
}

Ошибка (showError)

import { LoadStatus } from '@cloud-ru/ds-uikit-product-load-status';

export function WithHintError() {
  return (
    <LoadStatus
      label='Загрузка'
      value='Ошибка'
      progress={35}
      valueType='percent'
      hint='Не удалось завершить операцию'
      showError
      showErrorIcon
    />
  );
}

Пороги progress

import { LoadStatus } from '@cloud-ru/ds-uikit-product-load-status';

export function Thresholds() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16, maxWidth: 360 }}>
      <LoadStatus label='Низкий' progress={40} valueType='percent' />
      <LoadStatus label='Средний' progress={75} valueType='percent' />
      <LoadStatus label='Высокий' progress={95} valueType='percent' />
    </div>
  );
}

Props

Types

LoadStatusProps

ProgressLimitList

Unions

LoadValueType

Related props

ProgressBarSize

Storybook

Figma